什么算查询DOM？

Question

如果我这样做：

const table = document.getElementById('table1');

然后

const cell = table.rows.item(1).cells.item(1);

我是在第二次查询DOM吗？

Answer 1

是的，Node.childNodes 或 Node.parentNode 等的任何变体都会查询 DOM。

我们在 JS 世界中可以访问的 Node 对象只是对实际 DOM 对象的包装对象。这些包装器对象不包含指向 DOM 树的所有链接，它们所做的只是公开 getter 函数，这些函数将调用内部 DOM 方法来“查询 DOM ".

所以即使是抛出 TypeError 的行（因为你可能混淆了 item 和 find）

const cell = table.rows.find(1).cells.find(1);

将从.rows getter查询DOM。

然而，对变量 table 的简单访问并没有查询 DOM，您确实存储了包装对象，它保留了对底层 DOM 对象的引用。

请注意，一个例外是“命名元素”（带有 id 的元素），它们存储在 Map 中，可直接在 Window 对象上访问，因此可由 JS 访问。所以实际上，在第一行你没有查询 DOM.

现在，这重要吗？不是真的，而且今天的引擎有多快。

What counts as querying the DOM?