（一）类数组对象NodeList

NodeList对象的特点：

　　NodeList是一种类数组对象，用于保存一组有序的节点。

　　可以通过方括号语法来访问NodeList的值，有item方法与length属性。

　　它并不是Array的实例，没有数组对象的方法。

通过demo简单了解一下NodeList：

html：

<ul id="box">  
    <li>节点一</li>
    <li>节点二</li>
    <li>节点三</li>  
</ul>

Js:

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

控制台结果如下：

可见其原型对象为 NodeList，有item方法与length属性。

 

为什么说NodeList是类数组，不是真正的数组：

var oUl = document.getElementById("box")
var nodes = oUl.childNodes
nodes.push("<li>节点四</li>");

控制台结果如下：

说明nodes没有push()方法，不是数组。

 

那么我们如何将类数组转化为数组呢？

方法一：

    var oUl = document.getElementById("box");
    var nodes = oUl.childNodes;
    //nodes.push("<li>节点四</li>");
    function makeArray(nodeList) {
        var arr = [];
        for(var i=0,l=nodeList.length; i<l; i++){
            arr[i] = nodeList[i]
        }
        return arr
    }
    var newNodeList = makeArray(nodes);
    newNodeList.push("<li>节点四</li>");
    console.log(newNodeList)

结果如下：

此时这个数组的原型对象是Array。

方法二：

var oUl = document.getElementById("box");
var nodes = oUl.childNodes;
function makeArray(nodeList) {
    return Array.prototype.slice.call(nodeList);
}
var newNodeList = makeArray(nodes);
newNodeList.push("<li>节点四</li>");
console.log(newNodeList)

结果如下：

 

使用call方法在IE8及更低版本浏览器中存在兼容问题，解决方案如下：

1、使用apply方法（摘自：https://www.cnblogs.com/wangmeijian/p/4936939.html）：

Array.prototype.concat.apply([],nodes).slice(0)

2、上代码：

var box = document.getElementById("box");
var nodes = box.childNodes;
function makeArray(nodeList){
  var arr = null;
  try {
    return Array.prototype.slice.call(nodeList);
  }catch (e){
    arr = new Array();
    for(var i = 0, len = nodeList.length; i < len; i++){
      arr.push(nodeList[i]);
    }
  }
  return arr;
}
var newNodeList = makeArray(nodes);
newNodeList.push("<li>节点四</li>");
console.log(newNodeList);