querySelectorAll nie jest funkcją

Question

Próbuję znaleźć wszystkie oferty w var articleFirst, ale wiadomość zwrotna w konsoli mówi, że "querySelectorAll" nie jest funkcją. Dlaczego dostaję ten błąd?

To jest mój HTML:

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

To jest mój javascript:

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

Błąd:

Uncaught TypeError: articleFirst.querySelectorAll is not a function

Answer 1

Spróbuj rób tego:

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

Z konsoli można zobaczyć, co się dzieje.

Albo po prostu to zrobić:

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

Answer 2

querySelectorAll to metoda znaleźć na element i węzłów dokumentu w DOM .

Próbujesz wywołać go na zwracanej wartości połączenia do querySelectorAll, który zwraca listę węzłów (który jest obiektem typu tablica). Powinieneś zapętlić się nad listą węzłów i zadzwonić pod numer querySelector wszystko na każdym węźle w nim po kolei.

Alternatywnie, po prostu użyj kombinatora potomnego podczas pierwszego połączenia z nim.

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

Answer 3

Trzeba użyć document.querySelector zamiast document.querySelectorAll ponieważ następny zapytań zależy od single HTMLElement ale document.querySelectorAll zwraca 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>