Question

我正在尝试use jsperf to check，暂时从document分离容器是否可以加快更改其内容的速度（删除/附加多个元素）。但是在控制台中对我有用的代码给我jsperf一个错误。

准备工作：

<div id="container">
    <ul></ul>
</div>

// fill the list
var container = document.querySelector('#container');
var listElement = container.firstChild;
var initialContent = "";
for(var i = 0; i < 100; i++)
    initialContent += `<li>${i+1}</li>`;
listElement.innerHTML = initialContent;

拆卸（重要的是不要使用listElement.innerHTML = ''）

while(listElement.firstChild)
    listElement.removeChild(listElement.firstChild);

要配置的主要代码：

listElement = container.removeChild(listElement);
while(listElement.firstChild)
    listElement.removeChild(listElement.firstChild);
var newListItem;
for(var j = 100; j < 200; j++) {
    newListItem = document.createElement('li');
    newListItem.appendChild(document.createTextNode(j));
    listElement.appendChild(newListItem);
}
container.appendChild(listElement);

要比较的代码：

while(listElement.firstChild)
    listElement.removeChild(listElement.firstChild);
var newListItem;
for(var j = 100; j < 200; j++) {
    newListItem = document.createElement('li');
    newListItem.appendChild(document.createTextNode(j));
    listElement.appendChild(newListItem);
}

我得到的错误是：

未捕获的HierarchyRequestError：无法在执行'appendChild'   '节点'：此节点类型不支持此方法。


消息：未捕获的HierarchyRequestError：无法在“节点”上执行“ appendChild”：此节点类型不支持此方法。

文件名：https://jsperf.com/updating-lists-with-and-without-detaching/1

lineNumber：12

如果我在行listElement.appendChild(newListItem);中注释掉，它将消失

通过debugger;行添加断点向我显示listElement是某种程度上的文本节点。

Answer 1

好的，我在发布此内容时已经弄清楚了：使用

var listElement = container.firstElementChild;

代替

var listElement = container.firstChild;

解决了该问题。问题的根源是html中的空白

<div id="container">
    <ul></ul>
</div>

，它使container.firstChild成为包含文本'\n '的文本节点。在没有jsperf的情况下测试时，可能省略了空格。

希望这可能对其他搜索此错误的人有所帮助。

jsperf：未捕获的HierarchyRequestError：无法在“节点”上执行“ appendChild”：此节点类型不支持此方法

1 个答案: