javascript - 如何复制节点列表？

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

今天刚遇到同样的问题，发现你可以用“node.cloneNode”方法复制一个DOM节点元素，例如:

let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)

我从 MDN 文档中摘录了一段，您可以在此处找到: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

很可能您已经找到了解决方案，但无论如何，我将其留在这里以作记录。