DOM中節點的類型
DOM中一共有12中類型。但是我們常用的只有幾種。
首先我們了解下DOM中一般常見的節點類型有哪些？
1、元素節點
DOM中的原子都是元素節點，比如<body><table><div>等等。
如果把Web上的文檔比作一座大廈，則元素就是構成這塊大廈的磚石。一個文檔是由N個元素組成的。元素可包含其他元素。
2、文本節點
任意的文字、空格、換行、空白行都算是文本節點。
3、屬性節點
屬性節點，故名思議就是其他節點的屬性。例如所有的元素都有title屬性，在title='title1'就是一個屬性節點。
4、注釋節點
就是注釋了。
（1）childNodes介紹：
childNodes：返回父元素所有的直系子節點的集合，注意，與children不同的是，childNodes會返回HTML元素節點，屬性節點，文本節點。
先讓我們來看看childNodes的用法，以及是如何計算節點數量。代碼如下： （即：第11行代碼中的划線部分）
顯示效果如下圖：
為什么輸出是7而不是3呢？在舊版ie瀏覽器中會輸出3，而在火狐瀏覽器、谷歌瀏覽器、新版的ie等中會輸出7。原來舊版Internet Explorer 會忽略節點之間生成的空白文本節點（比如換行字符），而 Mozilla （即火狐瀏覽器）和Chrome等不這么做。
火狐的顯示如下圖所示：
如上所示，火狐會把空白節點（即文本節點）也會算成時自己的子節點來計算。
若要解決上面這一問題，需要這樣操作： （即：運用到nodeType知識）
（2）nodeType介紹：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload=function(){ 10 var oUl=document.getElementById('ul'); 11 12 for(var i=0;i<oUl.childNodes.length;i++){ //oUl.childNodes：獲取ul的子節點li元素 13 if(oUl.childNodes[i].nodeType==1){ 14 //當ul的子節點（childNodes）獲取到的nodeType為1時，此時獲取到的是li元素節點本身 15 16 //這樣就可以對li元素進行樣式改變等操作了 17 oUl.childNodes[i].style.background='red'; 18 } 19 } 20 } 21 </script> 22 </head> 23 <body> 24 <ul id="ul"> 25 <li>111</li> 26 <li>222</li> 27 <li>333</li> 28 </ul> 29 </html>
nodeType語法解釋：
nodeType 屬性返回以數字值返回指定節點的節點類型。
通過nodeType來判斷是哪種類型的節點，只有當nodeType==1時才是元素節點，2是屬性節點，3是文本節點
（3）children介紹：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload=function(){ var oUl=document.getElementById('ul'); console.log(oUl.children.length); //輸出ul的子節點個數，為3 oUl.children[1].style.background='blue'; //設置第二個子節點的背景顏色為藍色 } </script> </head> <body> <ul id="ul"> <li>111</li> <li>222</li> <li>333</li> </ul> </html>
以上，children的用法相比較於childNodes方法，只計算子節點，而不包括文本節點等。
children用法：返回父元素所有的直系子節點的集合，注意，children只返回HTML元素節點，不包括文本節點和屬性節點。
本次講解參照以下文章鏈接：
https://www.cnblogs.com/Jersen/p/4908943.html
https://blog.csdn.net/lvxiangan/article/details/81177283
https://blog.csdn.net/xx_xiaoxinxiansen/article/details/76100131