NodeList對象的特點(diǎn)：

　　NodeList是一種類數(shù)組對象，用于保存一組有序的節(jié)點(diǎn)。

　　可以通過方括號語法來訪問NodeList的值，有item方法與length屬性。

　　它并不是Array的實(shí)例，沒有數(shù)組對象的方法。

通過demo簡單了解一下NodeList：

html：

<ul id="box">  
    <li>節(jié)點(diǎn)一</li>
    <li>節(jié)點(diǎn)二</li>
    <li>節(jié)點(diǎn)三</li>  
</ul>

Js:

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

控制臺結(jié)果如下：

可見其原型對象為NodeList，有item方法與length屬性。

為什么說NodeList是類數(shù)組，不是真正的數(shù)組：

var oUl = document.getElementById("box")
var nodes = oUl.childNodes
nodes.push("<li>節(jié)點(diǎn)四</li>");

控制臺結(jié)果如下：

說明nodes沒有push()方法，不是數(shù)組。

那么我們?nèi)绾螌㈩悢?shù)組轉(zhuǎn)化為數(shù)組呢？

方法一：

    var oUl = document.getElementById("box");
    var nodes = oUl.childNodes;
    //nodes.push("<li>節(jié)點(diǎn)四</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>節(jié)點(diǎn)四</li>");
    console.log(newNodeList)

結(jié)果如下：

此時(shí)這個(gè)數(shù)組的原型對象是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>節(jié)點(diǎn)四</li>");
console.log(newNodeList)

結(jié)果如下：

使用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>節(jié)點(diǎn)四</li>");
console.log(newNodeList);

總結(jié)

以上是生活随笔為你收集整理的（一）类数组对象NodeList的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。