javascript - 请教一下element.children兼容的小问题...望诸君不吝赐教！-PHP中文网问答

一.问题：
如何实现浏览器兼容版的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('p');
var return1 = getElementChild(x);
console.log(return1);
document.write(return1);
</script>

HTML部分代码：

<body>
<p>大风起兮<span class="beautiful handsome">云飞扬</span>,<span>威加海</span>内兮归故乡。</p>
</body>

四.问题：
1.通过element.childNodes属性应该获得了子节点的集合了nodeList了吧...按理说应该可以通过nodeList.length来获得子节点个数了，w3c上如下所述：

不过chrome控制台上却显示：

这里诚挚的请教诸君，还望不吝赐教，多谢.
如果您有更好的代码或想法思路，希望也能分享出来，小子洗耳恭听~

全部回复(3)

天蓬老师2017-04-10 16:07:03 3楼

Chrome 的意思是，nodeList 是 undefined。

打个断点看看你那个 case 里的 element 是什么。我猜 element 并不是个元素节点，于是也就没有 childNodes。

赞 +0

添加回复

天蓬老师2017-04-10 16:07:03 2楼

getElementsByTagName返回带有指定标签名的对象集合，返回的是数组
element.childNodes中element是一个对象
方法一：

取getElementsByTagName返回数组的第一个元素作为参数传入

方法二：

用getElementById函数取代getElementsByTagName
getElementById返回对拥有指定ID的第一个对象的引用，返回的是一个对象

大家讲道理2017-04-10 16:07:03 1楼

哈哈,题主太马虎了哈，问题出错在

var x = document.getElementsByTagName('p');

应该是

var x = document.getElementsByTagName('p')[0];

所以你之前传进去的是一个nodelist，nodelist没有childNodes哦