javascript 中的nodeList理解

NodeList是一中类数组对象，用于保存一组有序的节点
可以通过方括号来访问NodeList的值，他有item()方法与length属性。
他并不是Array的实列，没有数组对象的方法。

如何拿到nodeList?

var box = document.getElementById('box');
var nodes = box.childNodes;

这样就可以拿到nodeList，我们可以在控制台看到
这里写图片描述

常用属性和方法
1.我们可以通过方括号来拿到节点，如：

        var box = document.getElementById('box');
        var nodes = box.childNodes;
        console.log(nodes[1]);

控制台就会打印出对应节点

2.也可以通过下面的方法访问节点

        console.log(nodes.item(1));

得到的效果是一样的

验证nodeList不是数组

        var box = document.getElementById('box');
        var nodes = box.childNodes;
        console.log(nodes.push('<li>2222</li>'));

这是控制台就会报错（push这个方法未定义）;
说明其不是数组。

怎样让他像数组呢？
你可能已经才到通过遍历把它转化为数组。

        var box = document.getElementById('box');
        var nodes = box.childNodes;
        function makeAarry(nodelist){
            var arr = [];
            for(var i=0,len = nodelist.length;i<len;i++){
                arr.push(nodelist[i]);
            }

            return arr;
        }
        var shownode = makeAarry(nodes);
        console.log(shownode);

这里还可以通过数组原形属性来实现

        var box = document.getElementById('box');
        var nodes = box.childNodes;
        function makeAarry(nodelist){
            // var arr = [];
            // for(var i=0,len = nodelist.length;i<len;i++){
            //     arr.push(nodelist[i]);
            // }



            // return arr;

            return Array.prototype.slice.call(nodelist);
        }
        var shownode = makeAarry(nodes);
        console.log(shownode);

效果是一样的（这个浏览器兼容是ie9+）；

实现兼容方法

         var box = document.getElementById('box');
        var nodes = box.childNodes;
        function makeAarry(nodelist){
            var arr = null;
            try{
                arr = Array.prototype.slice.call(nodelist);
            }catch(e){
                arr = [];
                for(var i=0,len = nodelist.length;i<len;i++){
                    arr.push(nodelist[i]);
                }
            }
            // var arr = [];
            // for(var i=0,len = nodelist.length;i<len;i++){
            //     arr.push(nodelist[i]);
            // }



            return arr;

            //return Array.prototype.slice.call(nodelist);
        }
        var shownode = makeAarry(nodes);
        console.log(shownode);

javascript 中的nodeList理解

猜你喜欢