QuerySelectorAll is not a function

Question

I am trying to find all the descriptors in var articleFirst, but the response message in the console says that "querySelectorAll" is not a function. Why am I getting this 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 to do this:

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

Using the console, you can see what is happening.

Or just do the following:

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

Answer 2

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

You are trying to call it by the return value of the querySelectorAll call, which returns a Node List (which is an array as an object). You will need to querySelector over the Node list and call querySelector all on each Node in it in turn.

Alternatively, just use the child combinator in your initial call.

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

Answer 3

You need to use document.querySelector instead of document.querySelectorAll because the following 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>