querySelectorAll 不是函数

Question

我试图在 var articleFirst 中找到所有的通知，但控制台中的返回消息说“querySelectorAll”不是一个函数。为什么我会收到这个错误？

这是我的 HTML：

 <article class="first">
  <div class="feature parts">
    <div class="oferts">
      <div class="heart icons"></div>
        <h1>Build with passion</h1>
    </div>
  </div>
</article>

这是我的 JavaScript：

 var articleFirst = document.querySelectorAll("article.first");
var oferts = articleFirst.querySelectorAll(".oferts");

错误：

未捕获的类型错误：articleFirst.querySelectorAll 不是函数

原文由 ChickenLeg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这样做：

 var articleFirst = document.querySelectorAll("article.first");
console.log(articleFirst)
var oferts = articleFirst[0].querySelectorAll(".oferts");
console.log(oferts)

使用控制台，您可以看到正在发生的事情。

或者只是这样做：

 document.querySelectorAll("article.first .oferts");

第三方编辑

回答

为什么我会收到这个错误？

昆汀的帖子有答案

原文由 Valter Júnior 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

querySelectorAll 是在 DOM 中的元素和文档节点上找到的方法。

您正在尝试在对 querySelectorAll 的调用的返回值上调用它，它返回一个节点列表（它是一个类似对象的数组）。您需要遍历节点列表并依次调用 querySelector 中的每个节点。

或者，只需在对它的初始调用中使用后代组合器。

 var oferts = document.querySelectorAll("article.first .oferts");

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议