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

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

这里的项目是一个nodeList 所以itemsArray还存储一个nodeList 现在，如果您尝试遍历itemsArray 那里只有一件事，就是您放入其中的nodeList 如果您将散布项目添加到itemsArray中，则会被插入，而不是整个odeList将会存储元素

Answer 2

今天碰到了同样的问题，发现您可以使用“ 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

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

Answer 3

如果要获取新的数组而不是chilNode 使用Array.from(nodeToCopy) 这将返回一个新的Array而不是一个子节点

如何复制节点列表？

3 个答案: