Question

我知道活动列表允许在添加或删除另一个节点时更新包含节点的变量，但是我正在努力考虑一个示例，该示例与使用非活动列表相比有什么好处（querySelectorAll ）？

Answer 1

它允许您只编写一次变量分配，而不必在更改DOM时进行更新。因此，您可以执行以下操作：

var allRows = document.getElementsByTagName("tr");

function processRows() {
    for (var i = 0; i < allRows.length; i++) {
        // do something with allRows[i]
    }
}

而不是：

function processRows() {
    var allRows = document.getElementsByTagName("tr");
    for (var i = 0; i < allRows.length; i++) {
        // do something with allRows[i]
    }
}

就其本身而言，这不是很吸引人，但是如果您有多个使用allRows的函数，则需要在每个函数中重复进行分配。实时NodeList允许他们所有人使用同一列表。

活动节点列表的实现使用缓存，因此仅在DOM修改后第一次使用该列表时才重新计算该列表，因此重新计算的成本将分摊到所有功能上。

JS：使用带有querySelector或getElementsByTagName的“实时”列表与非实时querySelectorAll相比有什么用？

1 个答案: