8、HTML DOM总结

1、HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）；HTML DOM 模型被构造为对象的树。

2、DOM 方法

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>

</body>
</html>

3、JS的事件

HTML 事件的例子：

当用户点击鼠标时 onclick
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <!-- ---------- -->
 5 <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
 6 
 7 <!-- ---------- -->
 8 <script>
 9     function changetext(id)
10     {
11         id.innerHTML="谢谢!";
12     }
13 </script>
14 </head>
15 <>
16 
17 <!-- ---------- -->
18 <h1 onclick="changetext(this)">请点击该文本</h1>
19 
20 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
21 
22 <button onclick="displayDate()">点击这里</button>
23 
24 <!-- ---------- -->
25 <script>
26     function displayDate()
27     {
28         document.getElementById("demo").innerHTML=Date();
29     }
30 </script>
31 
32 <p id="demo"></p>
33 
34 
35 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
36 
37 <button id="myBtn">点击这里</button>
38 
39 <!-- ---------- -->
40 <script>
41     document.getElementById("myBtn").onclick=function(){displayDate1()};
42     function displayDate1()
43     {
44         document.getElementById("demo1").innerHTML=Date();
45     }
46 </script>
47 
48 <p id="demo1"></p>
49 
50 
51 <!-------------------------->
52 
53 <div onmouseover="mOver(this)" onmouseout="mOut(this)" onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
54 
55 <script>
56     function mDown(obj)
57     {
58         obj.style.backgroundColor="#1ec5e5";
59         obj.innerHTML="请释放鼠标按钮"
60     }
61 
62     function mUp(obj)
63     {
64         obj.style.backgroundColor="green";
65         obj.innerHTML="请按下鼠标按钮"
66 
67     }
68 
69     function mOver(obj)
70     {
71         obj.innerHTML="谢谢"
72     }
73 
74     function mOut(obj)
75     {
76         obj.innerHTML="把鼠标移到上面"
77     }
78 </script>
79 
80 
81 </body>
82 </html>

4、JS的DOM节点

添加节点或者删除节点

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6     <p id="p1">这是一个段落。</p>
 7     <p id="p2">这是另一个段落。</p>
 8 </div>
 9 
10 
11 
12 <!-----添加一个超链接------------->
13 
14 <script>
15 
16     var para=document.createElement("a");
17     var node = document.createTextNode("new anchor");
18 
19     para.setAttribute("href","http://www.baidu.com");
20     para.appendChild(node);
21 
22     var element = document.getElementById("div1");
23     element.appendChild(para);
24 </script>
25 
26 <!-----删除id为p1的段落------------->
27 <script>
28 
29     var child = document.getElementById(p1);
30 
31     child.parentNode().remove(child);
32 </script>
33 
34 </body>
35 </html>