Не удается клонировать Node элемент JS

Question

Имеется сохраненная веб-страница (вики). Необходимо вывести все ссылки c этой страницы в отдельный блок results.

const results = document.getElementById("results");
const setOfLink = document.getElementsByTagName("a");

for(let i = 0; i < setOfLink.length; i++) {
        let a = setOfLink[i].cloneNode(false);
        results.append(a);
}

При выполнении этого кода все зависает и клонирование не происходит, однако вот этот код:

for(let i = 0; i < setOfLink.length; i++) {
        let a =  document.createElement("a");
        a = setOfLink[i];
        results.append(a);
}

хоть и некорректно (не клонирует ссылки), но работает. Объясните, пожалуйста, в чем причина зависания? Как правильно клонировать ссылки?

Answer 1

getElementsByTagName возвращает HTMLCollection — это «живая» структура данных, она обновляется при изменениях DOM. Каждый раз, как вы добавляете ссылку, её длина растёт, поэтому цикл никогда не заканчивается. Клонирование происходит, но вы его не можете увидеть, поскольку бесконечный непрерывный цикл скорее всего блокирует отрисовку новых элементов.

Можно проверить:

const setOfLink = document.getElementsByTagName("a");

for (let i = 0; i < setOfLink.length; i++) {
  console.log(setOfLink.length);
  let a = setOfLink[i].cloneNode(true);
  results.append(a);
  console.log(setOfLink.length);
  if (setOfLink.length > 100) break;
}

Исправить можно, превратив эту коллекцию в обычный массив:

const setOfLink = [...document.getElementsByTagName("a")];

Или:

const setOfLink = Array.from(document.getElementsByTagName("a"));

БЛОГ НА HUSL

Не удается клонировать Node элемент JS

Ответы (1 шт):