js之element.children与element.childNodes区别&兼容

element.children 获取的是当前元素的所有子节点元素(不包括文本元素),children返回的是HTMLCollection类型

element.childNodes 获取的是当前元素的有所子元素(节点元素和文本元素),childNodes返回的是NodeList类型

children会出现不兼容问题,兼容性代码如下:

1. 判断该浏览器是否支持children属性,是则返回element.children

2.如果不支持,则通过childNodes来获取该元素的所有子元素

3.通过nodeType属性过滤掉非节点元素,保存到elementArr中

4.返回elementArr

代码如下:

function getElementChild(element){

if (!element.children) {

var elementList = element.childNodes;

var elementItem,

elementArr = [];

for(var i = 0; i < elementList.length; i++){

elementItem = elementList[i];

if(elementItem.nodeType == 1){//说明该节点为元素节点

elementArr.push(elementItem);

}

}

return elementArr;

}else{

return element.children;

}

}

    原文作者:Q_Mia
    原文地址: https://www.jianshu.com/p/51c21bd950f5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞