原创
JavaScript——DOM简单入门
DOM简单入门
○ 功能
控制html文档的内容
○ 获取元素对象
通过标签(元素)的id获取页面标签(元素)对象 Element
document.getElementById(id);
○ 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
</head>
<body>
<h1 id="h1"></h1>
<script>
//通过id获取元素对象
var h = document.getElementById("h1");
document.write(h); //输出 [object HTMLHeadingElement]
</script>
</body>
</html>
注意：在示例中，需要注意script标签的插入位置，请观察以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
<script>
//通过id获取元素对象
var h = document.getElementById("h1");
document.write(h);
</script>
</head>
<body>
<h1 id="h1"></h1>
</body>
</html>
以上代码执行 document.write(h); 后，输出结果为null，是因为按照代码的执行顺序，当JavaScript代码通过 h1 获取元素时，对应的 h1 标签还未加载，所以出现null的情况，所以应在元素加载后再使用脚本代码获取元素对象
○ 操作元素对象
1. 修改属性值
<a id="link" href="http://www.sougou.com">link</a>
<script>
var a = document.getElementById("link");
alert("更换网址");
a.href = "http://www.baidu.com";
</script>
2. 修改标签体内容
innerHTML属性可以设置标签体内容
<p id="p1">123</p>
<script>
// 获取p1对象
var p1 = document.getElementById("p1");
// 修改p1内容
p1.innerHTML = "abc";
</script>
JavaScript
赞
- 作者：Melonico
- 发表时间：2021-03-15 15:37
- 更新时间：2021-03-15 15:37
评论