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");

错误：

未捕获的TypeError：articleFirst.querySelectorAll不是函数

Answer 1

querySelectorAll是在DOM中的Element和Document节点上找到的方法。

您正试图在调用querySelectorAll的返回值上调用它，该调用返回节点列表（类似对象的数组）。您需要循环遍历节点列表并依次在其中的每个节点上调用querySelector全部。

或者，只需在初次调用时使用后代组合器。

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

Answer 2

尝试这样做：

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

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

或者只是这样做：

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

Answer 3

您需要使用document.querySelector代替document.querySelectorAll，因为下一个查询取决于single HTMLElement，但document.querySelectorAll会返回NodeList。

document.addEventListener('DOMContentLoaded', TestCtrl);

function TestCtrl() {
  var firstArticle = document.querySelector('article.first');
  
  console.log('oferts', firstArticle.querySelectorAll('.oferts'));
}

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

querySelectorAll不是函数

3 个答案: