ParentNode.children兼容性說明
- element.children屬性桌面端和手機端所有瀏覽器都是支持的
注意:IE6受葛、7衅谷、8上面element.children的結(jié)果集中還會包括注釋標簽
2.document.children屬性桌面端和手機端針對IE和Safari都不支持,其他一些瀏覽器低版本也不支持
關(guān)于更多兼容性的問題可以點擊這里進行查看
ParentNode.children兼容版實現(xiàn)函數(shù)
/**
* [兼容低版本IE的element.children]
* @param {[type]} element [父元素]
* @return {[type]} [孩子節(jié)點集合]
*/
function getElementChildren(element) {
if (!element.children) { //判斷是否有children屬性
var childNodesList = element.childNodes; //獲取元素下面所有的孩子節(jié)點
var len = childNodesList.length;
var childrenList = [];
for (var i = 0; i < len; i++) {
if (childNodesList[i].nodeType === Node.ELEMENT_NODE) {
//如果是標簽?zāi)敲醇尤牒⒆庸?jié)點數(shù)組
childrenList.push(childNodesList[i]);
}
}
return childrenList;
} else {
return element.children;
}
}
函數(shù)返回值問題
從上面的實現(xiàn)代碼可以看出:在支持element.children
的瀏覽器中返回的值element.children
是HTMLCollection
類型,但是在不支持element.children
的瀏覽器中氏淑,返回的是一個數(shù)組對象。對于js中是否需要統(tǒng)一函數(shù)的返回值類型我還不是很清楚硕噩,所以暫時沒有處理假残,如果清楚的朋友可以給我留言說明。
節(jié)點類型判斷
1.Node.nodeType知識
| 常數(shù) | 值 | 說明 |
| ------- |:----------:| :--------|
| Node.ELEMENT_NODE | 1 | 元素節(jié)點炉擅,如:<div>辉懒、<span> 。|
| Node.TEXT_NODE | 3 | 文本 |
| Node.COMMENT_NODE | 8 | 注釋節(jié)點 |
| Node.DOCUMENT_NODE | 8 | document節(jié)點 |
說明:上面列出了部分js中nodeType的常量谍失,更多信息請點擊這里查看
使用childNodesList[i].nodeType === Node.ELEMENT_NODE
來進行節(jié)點類型的判斷眶俩,在不支持element.children
的瀏覽器中篩選符合要求的孩子節(jié)點。
2.最開始我是使用childNodesList[i].tagName
來篩選符合要求的節(jié)點的快鱼,后來發(fā)現(xiàn)注釋節(jié)點篩選失敗颠印,所以換了一種方式。