（一）类数组对象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);