拼接方法在子节点上下文中的奇怪行为

Question

我们有一个ul元素，其中包含四个li子元素 然后让我们说在控制台中执行以下代码

var a = document.getElementsByTagName("ul")[0];
a.childNodes.splice(1, 2, "abc", "cde");

然后弹出错误消息：

TypeError: a.childNodes.splice is not a function

这里有什么问题？

Answer 1

Node.childnodes返回Node List，这不是JavaScript中的数组。因此，您无法将splice应用于此。

正如MDN所说，

  

为什么NodeList不是数组？

     

NodeList与数组非常相似，很容易调用   它们上的Array.prototype方法，但NodeList对象没有   任何熟悉的数组方法。

解决方法是将它变成这样的数组。

var nodesArray = [].slice.call(a);
//now call the splice method.
nodesArray.childNodes.splice(1, 2, "abc", "cde");