JavaScript中DOM节点的查找(遍历)
这篇文章讲一下DOM节点的查找，即DOM节点的遍历。说道遍历大家应该不陌生了，在js中，通过DOM节点的遍历，我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位，到了后期开始学习jQuery时会感觉方便很多。
整个DOM中，节点与节点之间的关系只有两种，兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。
HTML代码：
<divclass="wrap"style="position:relative"><divclass="box"> 盒子01 <p>这是一个段落</p></div><divclass="box box2">盒子02</div><divclass="box box3">盒子03</div><ulclass="list"><li>列表01</li><li>列表02</li><li>列表03</li><li>列表04</li></ul></div>
1.父子关系遍历
var oWrap=document.getElementsByClassName("wrap")[0]; var oBox=document.getElementsByClassName("box")[0]; // children 返回子(元素)节点，不包含空节点 console.log(oWrap.children);// // childNodes 返回子节点，包含空节点 console.log(oWrap.childNodes);//text 空文本 // firstElementChild 第一个子(元素)节点，不包含空节点 console.log(oWrap.firstElementChild.firstChild); // firstChild 第一个子节点，包含空节点 console.log(oWrap.firstChild); // lastElementChild 最后一个子(元素)节点，不包含空节点 console.log(oWrap.lastElementChild); // lastChild 最后一个子节点，包含空节点 console.log(oWrap.lastChild);//#text // parentNode 父节点 console.log(oBox.parentNode.parentNode); // offsetParent 第一个有定位属性的父节点，如果没有，则返回body console.log(oBox.offsetParent);
2.兄弟(同胞)关系
// nextElementSibling 下一个兄弟(元素)节点，不包含空节点 console.log(oBox.nextElementSibling.nextElementSibling); // nextSibling 下一个兄弟节点，包含空节点 console.log(oBox.firstChild.nextSibling); console.log(oBox.nextSibling); // previousElementSibling 前一个兄弟节点，不包含空节点 console.log(oBox.previousElementSibling); // previousSibling 前一个兄弟节点，包含空节点 console.log(oBox.previousSibling);
