chidNodes返回的是node的集合，
每個node都包含有nodeType屬性。
nodeType取值：
元素節點：1
屬性節點：2
文本節點：3
注釋節點：8
頁面上是由無數個節點組成，節點分成元素節點、屬性節點、文本節點、注釋節點
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>
table與tr、tr與td、td與td之間的換行都屬於文本節點，如果獲取table的chidNodes，將會獲得9個節點，但事實上我們並不希望得到那些換行的空文本節點，td內的aaa仍然是td下的文本節點，要想獲得td內的aaa，則需要通過td.chidNodes去獲取，解決方法和示例如下：
1 <html> 2 <head> 3 <title></title> 4 <script src="../js/jquery-1.12.3.min.js"></script> 5 </head> 6 <body> 7 <table> 8 <tr> 9 <td>值1</td> 10 <td>值2</td> 11 <td>值3</td> 12 </tr> 13 <tr class="for-tr"> 14 <td>aaa</td> 15 <td>bbb</td> 16 <td>ccc</td> 17 </tr> 18 <tr class="for-tr"> 19 <td>ddd</td> 20 <td>eee</td> 21 <td>fff</td> 22 </tr> 23 <tr class="for-tr"> 24 <td>ggg</td> 25 <td>hhh</td> 26 <td>kkk</td> 27 </tr> 28 <tr class="for-tr"> 29 <td>lll</td> 30 <td>ppp</td> 31 <td>ooo</td> 32 </tr> 33 </table> 34 </body> 35 <script type="text/javascript"> 36 var postArr = []; 37 for (var i = 0; i < document.getElementsByClassName('for-tr').length; i++) {//循環所有的tr 38 var subObj = {}; 39 console.log(document.getElementsByClassName('for-tr')[i].childNodes); 40 // var subChild = delSpaceDom(document.getElementsByClassName('for-tr')[i]); 41 // subObj.name = subChild[0].childNodes[0].nodeValue; 42 // subObj.age = subChild[1].childNodes[0].nodeValue; 43 // subObj.sex = subChild[2].childNodes[0].nodeValue; 44 postArr.push(subObj); 45 }; 46 console.log(postArr); 47 </script> 48 </html>
打印出每個for-tr下的子元素節點，有七個節點，如圖：
移除空文本節點之后的代碼如下：
<html> <head> <title></title> </head> <body> <table> <tr> <td>值1</td> <td>值2</td> <td>值3</td> </tr> <tr class="for-tr"> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr class="for-tr"> <td>ddd</td> <td>eee</td> <td>fff</td> </tr> <tr class="for-tr"> <td>ggg</td> <td>hhh</td> <td>kkk</td> </tr> <tr class="for-tr"> <td>lll</td> <td>ppp</td> <td>ooo</td> </tr> </table> </body> <script type="text/javascript"> var postArr = []; for (var i = 0; i < document.getElementsByClassName('for-tr').length; i++) {//循環所有的tr var subObj = {}; var subChild = delSpaceDom(document.getElementsByClassName('for-tr')[i]); subObj.name = subChild[0].childNodes[0].nodeValue; subObj.age = subChild[1].childNodes[0].nodeValue; subObj.sex = subChild[2].childNodes[0].nodeValue; postArr.push(subObj); }; console.log(postArr); function delSpaceDom(parentNode) { var sub_child = parentNode.childNodes; for (var i = 0; i < sub_child.length; i++) { if(sub_child[i].nodeType == '3' && sub_child[i].nodeName == '#text' && !/\S/.test(sub_child[i].nodeValue)){//文本節點並且是空的文本節點時，將空文本節點刪除 parentNode.removeChild(sub_child[i]); } } return parentNode.childNodes; } </script> </html>
運行結果如下：
總結：
頁面上是由無數個節點組成，而childNodes是獲取到所有的節點，要想得到自己想要的節點，需要經過處理。
