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

错误:

未捕获的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因为下一个查询取决于 asingle HTMLElement但document.querySelectorAll返回 a 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>