javascript - DOMParser parseFromString仅在迭代生成的主体childNodes时才删除 Node

我正在编写一个electronicjs应用程序。我想解析一个字符串到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调用中提供有关第一个元素的信息，因此目前这确实令人沮丧。为什么代码的行为像它一样？

最佳答案

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 的克隆，并保持nodes列表不变。

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

关于javascript - DOMParser parseFromString仅在迭代生成的主体childNodes时才删除 Node ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60534792/