访问子节点:
1. someNode.childNodes:
返回一个NodeList对象,提供item(i)方法访问里面的元素。由于这也是一个类数组的对象,因此可以通过'[i]'获取里面的元素,通过length属性获取元素个数。
2. someNode.hasChildNodes():
判断是否存在子节点,true如果节点下有子节点。
3.第一个和最后一个节点也可以直接通过someNode.firstChild、someNode.lastChild来获取。
4.例子:
var nd = someNode.childNodes[i];
var nd = someNode.childNodes[childNodes.length - 1];
访问父节点:
通过 someNode.parentNode 访问
访问兄弟节点:
通过previousSibling(第一个节点的previousSibling为 null) 和 nextSibling(最后一个节点的nextSibling为 null).
if (someNode.nextSibling === null){
alert('最后一个子节点.');
} else if (someNode.previousSibling === null){
alert('第一个子节点.');
}
显然,如果只有一个子节点,则previousSibling,nextSibling均为null.
ownerDocument属性
每个节点都有一个属性ownerDocument,指向document本身。
alert(document.getElementById('div1').ownerDocuement === document)//true
说明:
1.子节点,父节点,兄弟节点之间的关系属性都是只读的,需要改变它们之间的关系,我们需要另外调用appendChild,replaceChild等方法。
2.并非所有的节点都具有这几个关系,如:文本节点不能再拥有子节点。
3.关于childNodes属性的访问时候的注意,假如有以下HTML代码:
<ul id='myList'>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
<ul id='myList2'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
以上代码中,看似myList 与myList2都拥有一样的子节点,其实,在不同浏览器中,childNodes是不一样的。
在IE中,myList 与myList2,childeNodes的长度都为3,即三个 li 子节点。
而在其它浏览器中,myList拥有7个子节点——包括3个li节点以及它们之间的4个空白文本节点。
所以,如果要通过childNodes对子节点进行处理,那么处理之前的节点判断是必要的:
for (var i=0, len=element.childNodes.length; i < len; i++){
//确定是element node
if (element.childNodes[i].nodeType == 1){
//do processing
}
}