javascript - DOMParser parseFromString 仅在迭代结果主体 childNodes 时删除 Node

Question

我正在编写一个 electrojs 应用程序。我想将字符串解析为 DOM Node ，并尝试使用 DOMParser parseFromString 来实现。这是代码:

let str = '<div id="customerList" style="display: none;"><ul></ul></div><script type="text/javascript" src="../js/customerList.js"></script>';
let nodes = new DOMParser().parseFromString(str, 'text/html').body.childNodes;
console.log(nodes);

这会返回一个 NodeList，其中包含 2 个元素，即预期的 div 和 scriptl。如果我在代码中添加以下部分，第一个元素 div 将从 NodeList 中消失:

let str = '<div id="customerList" style="display: none;"><ul></ul></div><script type="text/javascript" src="../js/customerList.js"></script>';
let nodes = new DOMParser().parseFromString(str, 'text/html').body.childNodes;
console.log(nodes);
for (let node of nodes) {
  contentDiv.appendChild(node);
}

for 循环位于 console.log 之后，并以某种方式改变了之前代码的行为。我似乎无法弄清楚为什么代码的行为会像它那样......因为我想提供有关 ipcRenderer 调用中第一个元素的信息，目前这实际上非常令人沮丧。为什么代码会有这样的表现？

Answer 1

Node.appendChild() 将 Node 移动到新的目的地。这就是它从您的 Node 列表中消失的原因。

您可以克隆 Node 以避免这种情况，如下所示:

let str = '<div id="customerList" style="display: none;"><ul></ul></div><script type="text/javascript" src="../js/customerList.js"></script>';
let nodes = new DOMParser().parseFromString(str, 'text/html').body.childNodes;
console.log(nodes);
for (let node of nodes) {
  contentDiv.appendChild(node.cloneNode());
}

这将从列表中追加所有(!) Node 的克隆，并保持您的 Node 列表不变。

引用:https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild