支持Element Traversal 規(guī)范的瀏覽器有IE 9+、Firefox 3.5+、Safari 4+、Chrome 和Opera 10+。

對(duì)于元素間的空格，在IE9之前，都不會(huì)返回文檔節(jié)點(diǎn)，其它的所有瀏覽器都會(huì)返回文檔節(jié)點(diǎn)。

為了兼容瀏覽器這間的差異，又不更改已有的DOM 標(biāo)準(zhǔn)，所以有了 Element Traversal 規(guī)范。

這個(gè)規(guī)范為 元素增加了 5 個(gè) 屬性

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

詳細(xì)官方文檔; http://www.w3.org/TR/ElementTraversal/

對(duì)于元素間的空格，IE9以前的版本不會(huì)返回文本節(jié)點(diǎn)，而其他瀏覽器都會(huì)將空格當(dāng)做是文本節(jié)點(diǎn)返回。這就導(dǎo)致了在使用childNodes和firstChild的屬性時(shí)行為的不一致。為了彌補(bǔ)這一差異，而同時(shí)又保持DOM規(guī)范的不變，W3C Element Traversal規(guī)范新定義了一組屬性。

Element Traversal API為DOM元素添加了下面5個(gè)屬性：

• childElementCount：返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)。
• firstElementChild：指向第一個(gè)子元素。
• lastElementChild：指向最后一個(gè)子元素。
• previousElementSibling：指向前一個(gè)同輩元素。
• nextElementSibling：指向后一個(gè)同輩元素。

支持的瀏覽器為DOM元素添加了這些屬性，利用這些元素不必?fù)?dān)心空白文本節(jié)點(diǎn)，從而可以非常方便的查找DOM元素了。

下面是一個(gè)示例。在以前，要跨瀏覽器遍歷某個(gè)元素的所有子元素時(shí)，需要像下面這樣編寫代碼：

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

而使用Element Traversal新增的屬性，代碼就會(huì)變得非常簡(jiǎn)潔：

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

支持Element Traversal規(guī)范的瀏覽器有：IE9+，F(xiàn)irfox3.5+，Safari4+，Chrome和Opera10+。

最新評(píng)論