实现浏览器兼容版的element.children

来源:互联网 发布:plc编程下载 编辑:程序博客网 时间:2024/06/06 09:01

element.children能够获取元素的元素子节点,但是低版本的ie不支持,兼容实现:

//声明一个函数,可以完成element.children相似的功能        function getChildElementNodes(element) {            //第一步是条件语句来判断浏览器是否支持element.children属性            //如果支持呢,element.children的值是一个集合而不是undefined            if (element.children == "undefined") {                // 既然没有,自己为element元素创建一个children属性,并把函数returnEle的返回值给这个属性                element.children = returnEle();                return element.children;            }else {                alert("浏览器上有了,不需要兼容");            }            //element.children等号右边要进行的逻辑操作            function returnEle() {                var childNodes,                    EleNodes = [],                    i = 0,                // 等号右边获取的所有节点类型全部赋值给EleNodes这个变量                childNodes = element.childNodes;                //现在要为childNodes里面的节点做循环判断了,我们只要元素节点                for (var i; i<childNodes.length; i++) {                    // 判断节点是不是元素节点想到了两种方法                    // childNodes[i].nodeType === 1                    if (Object.prototype.toString.call(childNodes[i]) === "[object Element]") {                        EleNodes.push(childNodes[i]);                    }                }               return EleNodes;            }        }        // 在文档中获取你想要动动手脚的节点        var box = document.getElementById('pNode');        // 调用兼容低版本可以实现跟真正的element.children一样功能的函数        var childEles = getChildElementNodes(box);        console.log(childEles);
原创粉丝点击