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

エラー：

Uncaught TypeError: articleFirst.querySelectorAll is not a function

Answer 1

試してみてください。コンソールで

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

あなたは何が起こっているのかを見ることができます。

それとも、この操作を行います。

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

Answer 2

querySelectorAllは、DOMの要素とドキュメントノードで見つかった方法であり、 。

ノードリスト（オブジェクトのような配列）を返すquerySelectorAllへの呼び出しの戻り値で呼び出そうとしています。ノードリストをループして、ノード内の各ノードでquerySelectorを順番に呼び出す必要があります。

また、最初の呼び出しで子孫コンビネータを使用するだけです。これを行うのですか

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

Answer 3

あなたは次のクエリはsingle HTMLElementに依存するがNodeListをdocument.querySelectorAll返すのでdocument.querySelectorの代わりdocument.querySelectorAll使用する必要があります。

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>