om直接選擇器
阿新 • • 發佈：2017-08-26
solid utf-8 html 上一個 ria ldr node htm tts 
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個om直接選擇器*/ 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>
om直接選擇器