DOM中的节点关系

　　文档中所有的节点之间都存在这样或那样的关系,节点间的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱.在HTML中,可以将<body>看成是<html>元素的子元素,相应的,也就可以将<html>元素看成是<body>元素的父元素,而<head>元素,可以看成是<body>元素的同胞元素,因为它们都是同一个父元素<html>的直接子元素.

 

　　每个节点都有一个childNodes属性,其中保存中一个NodeList对象.NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点.请注意:虽然可以通过方括号表示法来访问NodeList的值,而且这个对象也有length属性,但它并不是Array的实例.NodeList对象的独特之处在于,它实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映在NodeList对象中.

下面的例子展示了如何访问并保存在NodeList中的节点,可以通过方括号,也可以使用item(i)方法:

　　var firstChild=someNode.childNodes[0];

　　var secondChild=someNode.childNodes.item(0);

　　var count=someNode.childNodes.length;

要注意length属性表示的访问NodeList的那一刻,其中包含的节点数量,对arguments对象使用Array.prototype.slice()方法可以将其转换为数组,而采用同样的方法,也可以将NodeList对象转换为数组;

 

//在ie8及之前的版本无效

var ary1=Array.prototype.slice.call(someNode.childNodes,0);

除了ie8及更早版本外,折行代码能在任何浏览器中运行,由于ie8及更早版本将NodeList实现为一个COM对象,而我们不能像使用JScript那样使用这种对象,因此上面的代码会导致错误.要想在ie中奖NodeList转换为数组,必须手动枚举所有成员.下面的代码在所有浏览器中都可以运行:

 1  function convertToArray(nodes){
 2     var ary=null;
 3     try{
 4         ary=Array.prototype.slice.call(nods,0);//针对非IE浏览器
 5     }catch(e){
 6         ary=new Array();
 7         for(var i=0; i<nodes.length; i++){
 8         ary.push(nodes[i]);
 9         };
10     };
11     return ary;
12  };
13

　　每个节点都有一个parentNode属性,该属性指向文档树中的父节点,包含在childNodes列表中的所有节点都具有相同的父节点,因此它们的parentNode属性都指向同一个节点.此外,包含在childNodes列表中的每个节点相互之间都是同胞节点,通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点,列表中第一个节点的previousSibling属性值为null,列表最后一个节点的nextSibling属性值同样也为null.

　　父节点与其第一个和最后一个子节点之间也存在特殊关系,父节点的firstChild和lastChild属性分别指向childNodes列表中的第一个和最后一个子节点.其中someNode.firstChild的值始终等于someNode.childNodes[0],而someNode.lastChild的值始终等于someNode. childNodes[someNode.childNodes.length-1],在只有一个子节点的情况下,firstChild和lastChild指向同一个子节点.如果没有子节点,那么firstChild和lastChild的值均为null.

　　在反映这些关系的所有属性中,childNodes属性与其他属性相比更方便一些,因为只需简单的关系指针,就可以通过它访问文档树中的任何节点.另外,hasChildNodes()也是非常有用的方法,这个方法在节点包含一个或多个子节点的情况下返回true,应该说,这是比查询childNodes列表的length属性更简单的方法.

　　所有节点都有的最后一个属性是ownerDocument,该属性指向表示整个文档的文档节点,这种关系表示的是任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中,通过这个属性,我们可以不必在节点层次中通过层层回溯到达顶端,而是可以直接访问文档节点.

虽然多有节点类型都继承自Node,但并不是每种节点都有子节点.

 

 posted on 2015-05-10 23:08  gupeng1988  阅读(634)  评论(0)    收藏  举报