DOMParser parseFromString удаляет узлы только при итерации результирующих дочерних узлов тела

Question

Я пишу электронное js приложение. Я хочу разобрать строку в узлах DOM и попытаться использовать для этого 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 с двумя элементами, ожидаемыми 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);
}

Значение для l oop находится после console.log и каким-то образом изменяет поведение код до. Похоже, я не могу понять, почему код ведет себя так, как он ... Хотя я хочу предоставить информацию о первом элементе в вызове ipcRenderer, на данный момент это довольно сложно. Почему код ведет себя так, как он?

Answer 1

Node.appendChild() перемещает узел в новое место назначения. Вот почему он исчезает из вашего списка узлов.

Вы можете клонировать узел, чтобы избежать этого следующим образом:

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());
}

Это добавит клоны всех (!) Узлов из списка и сохранит Ваш nodes список как есть.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild