在选择器中使用相对元素或链接查询选择器之间的区别

Difference between using relative elements in selector or chaining querySelector?

本文关键字：选择器 查询 链接 之间 区别 元素 相对      更新时间：2023-09-26

这两种查找其他指定元素中的元素的方法有什么区别？

// Chaining querySelector()
document.querySelector("#firstDiv").querySelector(".active");
document.querySelector("#firstDiv").querySelectorAll("p");
// Using relative elements
document.querySelector("#firstDiv .active");
document.querySelectorAll("#firstDiv p");

我应该使用哪种方法？有关系吗？如果是这样，为什么重要？

第一种方法容易出错;如果#firstDiv不匹配任何内容，则对querySelector()的第一次调用将返回 null，并且以下方法调用将失败并显示 TypeError。

第二种方法，只要你提供一个有效的选择器，永远不会抛出任何错误，因为你只处理对文档对象的单个调用，这是保证存在的。它只会返回与选择器匹配的元素，否则返回 null。

这两种方法是等效的，因为对元素对象querySelector()或querySelectorAll()的调用被视为后代（子树）查询。

相关文章：