Как скопировать нодлист?

Question

Я пытаюсь настроить функцию поиска для большой таблицы, содержащей около 1000 строк. Проблема в том, что рендеринг сильно снижает производительность. Это потому, что я перебираю все строки в таблице и устанавливаю стиль для тех, которые не содержат поисковый запрос, в «none».

По какой-то причине браузер отображает все элементы снова каждый раз, когда я делаю изменения. Я получаю данные таблицы в виде нодлиста через document.quesrtySelectorAll ('tbody tr'). Мое решение состоит в том, чтобы скопировать это в новый объект, выполнить поиск и изменение стиля для нового объекта, а затем скопировать его обратно, в результате чего браузеру придется только один раз выполнить рендеринг таблицы.

let items = document.querySelectorAll('tbody tr');
let itemsArr = [...items];

for (let ele of itemsArr) {
    . . .

    if (!lower_case_table_value.match(lower_case_search_value)) {
        ele.style.display = 'none';
    }
    else {
        ele.style.display = 'table-row';
    }
}

let list = document.querySelector('tbody');
for (let i = 0; i < items.length; i++) {
    list.appendChild(itemsArr[i]);
}

Независимо от того, что я делаю, любые изменения, которые я делаю в новом объекте, также вносят изменения в старый. Я удалил второй цикл for, и он ведет себя так, как будто ничего не произошло. Как будто это не копия, а указатель.

Кто-нибудь знает, кто должен копировать нодлист в новый объект и убедиться, что они являются отдельными, а не указателями друг на друга?

Answer 1

let items = document.querySelectorAll('tbody tr');
let itemsArr = [...items];

здесь элементы это nodeList так itemsArray хранит также nodeList Теперь, если вы попытаетесь перебрать itemsArray там есть только одна вещь - это список узлов, который вы там поместили insted, если вы добавите распространяемые элементы в itemsArray, вы будете хранить элементы, а не весь odeList

Answer 2

если вы хотите получить новый массив вместо chilNode, используйте Array.from(nodeToCopy), это возвращает новый массив вместо дочернего узла