时间戳

首页 > 解决方案 > 如何复制节点列表？

javascript - 如何复制节点列表？

问题描述

我正在尝试为大约 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 循环，它的行为就像什么都没发生一样。就好像它不是一个副本，而是一个指针。

有谁知道谁将节点列表复制到一个新对象并确保它们是分开的而不是彼此的指针？

标签： javascripthtmlarraysdomrender

解决方案

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

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

推荐阅读