querySelectorAll is not a function

Question

I'm trying to find all oferts in the var articleFirst, but the return message in the console says that "querySelectorAll" is not a function. Why I do get that error?

This is my HTML:

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

This is my JavaScript:

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

Error:

Uncaught TypeError: articleFirst.querySelectorAll is not a function

Answer 1

Try do do this:

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

With console you can see what is happening.

Or just do this:

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

3rd pary edit

To answer

Why I do get that error?

Quentin’s post has the answer

Answer 2

querySelectorAll is a method found on Element and Document nodes in the DOM.

You are trying to call it on the return value of a call to querySelectorAll which returns a Node List (which is an array like object). You would need to loop over the Node List and call querySelector all on each node in it in turn.

Alternatively, just use a descendant combinator in your initial call to it.

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

Answer 3

You need to use document.querySelector instead of document.querySelectorAll because the next query depends on a single HTMLElement but document.querySelectorAll returns 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>

Answer 4

A little verbose but you could try qselectorAll('article') then turn that nodeList into an array and pick the first index.. so something like:

let articleList = querySelectorAll('article'); // makes a NodeList of all article tags on the webpage

let article = Array.from(articleList);

article[0];