标签：ntc type 第一个 lap des ide 根据 元素 order
1 <!DOCTYPE html> 2 <!--Dom直接选择器--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>DOM Tutoria</title> 7 <style> 8 .d1 { 9 display: inline-block; 10 width: 455px; /*一行4个*/ 11 margin: auto; 12 } 13 .d2{ 14 width:254px; 15 height:160px; 16 padding:0px; 17 margin:0px; 18 border:1px solid; 19 background-color:#aaa; 20 word-wrap:break-word; 21 } 22 .d3 { 23 display: inline-block; 24 width: 310px; /*一行4个*/ 25 margin: auto; 26 } 27 </style> 28 29 </head> 30 <body> 31 <div class="d1">文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。 32 它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。 33 我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器， 34 而不是JavaScript语言规范里的规定的核心内容。</div> 35 <div>查找元素</div> 36 <div class="d1"> 37 1、----------------------直接查找----------------------- 38 document.getElementById 根据ID获取一个标签 39 document.getElementsByName 根据name属性获取标签集合 40 document.getElementsByClassName 根据class属性获取标签集合 41 document.getElementsByTagName 根据标签名获取标签集合 42 </div> 43 <div class="d2"> 44 2、-----------间接查找---------- 45 parentNode // 父节点 46 childNodes // 所有子节点 47 firstChild // 第一个子节点 48 lastChild // 最后一个子节点 49 nextSibling // 下一个兄弟节点 50 previousSibling // 上一个兄弟节点 51 </div> 52 <div class="d3"> 53 parentElement // 父节点标签元素 54 children // 所有子标签元素 55 firstElementChild // 第一个子标签元素 56 lastElementChild // 最后一个子标签元素 57 nextElementtSibling // 下一个兄弟标签元素 58 previousElementSibling // 上一个兄弟标签元素 59 </div> 60 <br/> 61 <br/> 62 <br/> 63 <div> 直接查找使用演示实例 </div> 64 65 <div id="i1">我是i1</div> 66 <a> a1 </a> 67 <a> a2 </a> 68 <a> a3 </a> 69 70 <br/> 71 <br/> 72 <br/> 73 74 <div> 直接查找使用演示结果 .innerHTML 是显示在网页，在审查元素中console不要加 </div> 75 <script> 76 var x = document.getElementById("i1").innerHTML; 77 document.write(x) 78 </script> 79 <br/> 80 <br/> 81 <script> 82 var y = document.getElementById("i1").innerHTML.innerText = "新内容"; 83 document.write(y) 84 </script> 85 <br/> 86 <br/> 87 <div>document.getElementsByTagName("a")</div> 88 <div>只能在审查元素中console使用</div> 89 <script> 90 for(var i=0;i<100;i=i+1) { 91 var z = document.getElementsByTagName("a")[i].innerHTML; 92 document.write(z) 93 } 94 </script> 95 <br/> 96 <br/> 97 <script> 98 var z = document.getElementsByTagName("a")[1].innerHTML.innerText = "666"; 99 document.write(z) 100 </script> 101 102 <br/> 103 <br/> 104 <div>循环修改</div> 105 <script> 106 for(var i=0;i<100;i=i+1) { 107 var z = document.getElementsByTagName("a")[i].innerHTML.innerText = "g1"; 108 document.write(z) 109 } 110 </script> 111 <script> 112 tags = document.getElementsByTagName("a") 113 for(var i=0;i<tags.length;i=i+1) { 114 var z = tags[i].innerHTML.innerText = "g2"; 115 } 116 document.write(z) 117 118 </body> 119 </html>
标签：ntc type 第一个 lap des ide 根据 元素 order
原文地址：http://www.cnblogs.com/ujq3/p/7434856.html
