querySelectorAll bir işlev değil

Question

Tüm makaleleri var articleFirst içinde bulmaya çalışıyorum, ancak konsoldaki dönüş iletisi "querySelectorAll" bir işlev olmadığını söylüyor. Neden bu hatayı alıyorum? Bu benim JavaScript'tir

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

:

Bu

benim HTML

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

Hata:

Uncaught TypeError: articleFirst.querySelectorAll is not a function

Answer 1

Dene: konsolu ile

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

neler olduğunu görebiliriz.

Ya da sadece bunu:

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

Answer 2

querySelectorAll DOM Öğesi ve Belge düğümlerinde bulunan bir yöntemdir .

Bir aramanın Dönüş değeri üzerine, bir Düğüm Listesi (bu, bir dizi gibi bir nesne) döndüren querySelectorAll olarak çağırmaya çalışıyorsunuz. Düğüm Listesinin üzerine dönüp, her bir düğümünde sırasıyla querySelector numarasını aramanız gerekir.

Alternatif olarak, ilk çağrınızda soyundan gelen bir birleştiriciyi kullanın. Bu yaparsınız

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

Answer 3

sonraki sorgu single HTMLElement bağlıdır ancak NodeListdocument.querySelectorAll döndürdüğü için document.querySelector yerine document.querySelectorAll kullanmak gerekir.

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>