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;width: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>
