如何复制节点列表？

Question

我正在尝试为大约 1000 行的大表设置搜索功能。这样做的问题是渲染会极大地消耗性能。这是因为我正在迭代表中的所有行，并将不包含搜索查询的行的样式设置为“无”。

由于某种原因，每次我进行更改时，浏览器都会再次呈现所有元素。我通过 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

如果你想获得一个新的数组而不是一个 chilNode 使用Array.from(nodeToCopy) 这会返回一个新的数组而不是子节点