一.问题:
如何实现浏览器兼容版的element.children
element.children能够获取元素的元素子节点,但是低版本的ie不支持,如何在低版本的ie上兼容类似的功能。
二.我的思路:
⑴写一个函数getElementChild(element),传入一个父节点element.
⑵判断DOM中element对象的children属性是否存在,存在则直接返回element.children,不存在则执行兼容代码.
⑶兼容代码思路:
①创建一个数组elementArr以便返回最终 [符合要求] 的子节点集合。
②调用element对象的childNodes属性,以获取其子节点集合。
③遍历子节点集合,对每一个子节点进行判断,如果节点类型为1(即节点类型为元素节点),则添加到elementArr返回数组中。
④返回数组elementArr
三.代码如下:
JS部分:
<script type="text/javascript">
function getElementChild(element){
if(!element.children){
var elementArr = [];//声明一个数组用以存放之后获取的子节点
var nodeList = element.childNodes;//初始化接受参数的子节点集合
for(var i=0;i<nodeList.length;i++){ //遍历集合
if(nodeList[i].nodeType == 1){//若节点的元素类型属于1,即元素节点,存入数组
elementArr.push(nodeList[i]);
}
}
return elementArr;//返回存放子元素的数组
}
else{ //若支持element.children,直接返回
return element.children;
}
}
var x = document.getElementsByTagName('div');
var return1 = getElementChild(x);
console.log(return1);
document.write(return1);
</script>
HTML部分代码:
<body>
<div>大风起兮<span class="beautiful handsome">云飞扬</span>,<span>威加海</span>内兮归故乡。</div>
</body>
四.问题:
1.通过element.childNodes属性应该获得了子节点的集合了nodeList了吧...按理说应该可以通过nodeList.length来获得子节点个数了,w3c上如下所述:
不过chrome控制台上却显示:
这里诚挚的请教诸君,还望不吝赐教,多谢.
如果您有更好的代码或想法思路,希望也能分享出来,小子洗耳恭听~
Chrome 的意思是,
nodeList
是undefined
。打个断点看看你那个 case 里的
element
是什么。我猜element
并不是个元素节点,于是也就没有childNodes
。