使用选择器中的相对元素或链接querySelector之间的区别？

Question

找到其他指定元素中的元素的方法之间有什么区别？

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

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

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

Answer 1

第一种方法容易出错;如果#firstDiv没有匹配，则对querySelector()的第一次调用将返回null，并且以下方法调用将因TypeError而失败。

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

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