一、通過javascript的遍歷可以由一個節點來查找它的子節點(childNodes)、兄弟節點(nextSibling/previousSibling)和父節點(parentNode)。
代碼說明:
<ul id="myul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
1、獲取ul的所有子節點——childNodes
<script> var ul=document.getElementById('myul'); for(var i=0;i<ul.childNodes.length;i++){ console.log(ul.childNodes[i]); } </script>
2、因為通過1獲取了ul的所有的子節點,所以就可以直接通過childNodes來直接訪問它里面的子節點
提醒:1、childNodes最后獲得的是一個數組對象childNodes[i] 2、這里所獲得的素有子節點也包括空白節點,看截圖
所以,
訪問第一個li: ul.childNodes[1]或者ul.childNodes.item(1)
第二個li: ul.childNodes[3]或者ul.childNodes.item(3)
第三個li: ul.childNodes[5]或者ul.childNodes.item(5)
第四個li: ul.childNodes[7]或者ul.childNodes.item(7)
3、訪問到了第一個li,就可以通過第一個li節點來訪問后面一個或者前面一個,那就是nextSibling/previousSibling
所以:
第二個li:ul.childNodes[1].nextSibling.nextSibling(不要忘了之間的空白節點);
第一個li: ul.childNodes[3].previousSibling.previousSibling
4、當然我們也可以直接通過firstChild和lastChild來訪問ul的第一個節點和第二個節點
5、訪問到子節點,直接parentNode找到父節點
二、解決空白節點的問題
1、在js里面添加一個判斷
<script> var ul=document.getElementById('myul'); for(var i=0;i<ul.childNodes.length;i++){ if(ul.childNodes[i].nodeType==1){ console.log(ul.childNodes[i]); } } </script>
這樣控制台打印出的結果就是4個li子元素
2、還是上面的例子
獲得所有li: ul.children獲得一個數組
第一個li:ul.children[0]或者ul.children.item(0)或者ul.firstElementChild;
兄弟li:nextElementSibling/previousElementSibling
最后一個li:lastElementChild