js節點操作 整個頁面可以看成文檔節點，節點用node表示。頁面裡面全是節點，元素節點， 屬性節點，文本節點(文字，空格，換行)， 節點：一定有節點類型，節點名稱，節點值 節點類型的值： 元素節點為1，屬性節點為2，文本節點為3 通過節點，可以更好的獲取元素。 邏輯全在代碼裡面 js部分 長話短說： ...
js節點操作
通過節點，可以更好的獲取元素。
邏輯全在代碼裡面
1 <body> 2 <div class="con"> 3 <ul> 4 <li class="item3"></li> 5 <li class="item4"></li> 6 <li class="item5"></li> 7 <li class="item6"></li> 8 </ul> 9 10 <ol> 11 <li class="item7"></li> 12 <li class="item8"></li> 13 <li class="item9"></li> 14 <li class="item10"></li> 15 </ol> 16 17 </div>
js部分
1 <script> 2 //我想要獲取ul下麵的所有li 3 var ulele = document.querySelector("ul"); 4 var lis = ulele.querySelectorAll("li"); //獲取了4個li沒毛病 5 //console.log(lis); 6 //假如獲得了ul裡面的li，那如何重新獲得ul元素節點呢？ 7 8 console.log(lis[1].parentNode); //獲取的是離這個元素最近的爸爸，而不是爺爺 9 10 //獲取ol下所有的li元素節點 11 var olele = document.querySelector("ol"); 12 console.log(olele.childNodes); //[text, li.item7, text, li.item8, text, li.item9, text, li.item10, text] 得到的結果，為什麼會有九個節點呢？ 13 //因為childNodes獲取的是所有的節點，包括元素節點，文本節點 14 15 //要想獲取元素節點 16 for (var i = 0; i < olele.childNodes.length; i++) { 17 if (olele.childNodes[i].nodeType == 1) { //元素節點的節點類型值為1，屬性節點的節點類性質為2，文本節點的節點類性質為2 18 console.log(olele.childNodes[i]); 19 20 } 21 } 22 //好麻煩呀 23 //別慌，有直接獲取元素節點的操作 24 console.log("-----------------華麗的分割線----------------------"); 25 console.log(olele.children); //元素.children直接獲取元素節點 26 27 console.log("--------節點操作之第一個元素和最後一個元素---------"); 28 //獲取ul下的第一個元素 29 var firstulli = ulele.firstChild; 30 console.log(firstulli); //結果#text 什麼？獲取的竟然是文本節點？ 31 console.log(ulele.lastChild); //結果#text 什麼？獲取的竟然是文本節點？ 32 33 //辦法其一: 34 35 console.log(ulele.firstElementChild); //直接獲取元素節點，但是相容性不好 36 console.log(ulele.lastElementChild); 37 38 39 console.log("---------------------實際開發中的做法-----------------------"); 40 console.log(ulele.children[0]); 41 console.log(ulele.children[ulele.children.length - 1]); 42 </script>
長話短說：
子節點.parentNode得到的是直接父元素
父元素.childNodes得到的是所有子節點，包括元素節點，文本節點，父元素.children得到的是元素節點
父元素.firstChild得到的是第一個節點，經常是文本節點，因為需要換行空格嘛，父元素.firstElementChild得到父元素的第一個元素節點，但相容性不好
實際開發中做法：先用children得到所有元素節點，再用偽數組的索引來取得相應位置的元素
