JavaScriptのquerySelectorAll（）のエラー

Question

querySelectorAllを使用して要素を取得しようとすると問題が発生します。

<div id="paginacao"> 
    <div class="pag-base"> <a href="#">{{1}}</a> </div> 
    <div class="pag-base"><a href="#">{{2}}</a></div> 
    <div class="pag-base"><a href="#">{{3}}</a></div> 
    <div class="pag-base"><a href="#">{{4}}</a></div> 
    <div class="pag-base"><a href="#">{{5}}</a></div> 
    <div class="pag-base"><a href="#">{{6}}</a></div> 
    <div class="pag-base"><a href="#">{{7}}</a></div> 
    <div class="pag-base"><a href="#">{{8}}</a></div> 
    <div class="pag-base"><a href="#">{{9}}</a></div> 
    <div class="pag-base"><a href="#">{{10}}</a></div> 
    <div class="pag-base"><a href="#">...</a></div> 
    </div> 

私にはJavaScriptでこれをやっている：ここで

は、私はJSから取得したいHTMLの一部である

var pages = document.querySelectorAll(".pag-base a"); 
console.log(pages[0].textContent); 

が、これは常にundefinedを返します。私が間違っていることは誰でも知っていますか？

Answer 1

コードに問題はありません。期待通りに働い

すべては、あなたのDOMの準備が整う前に、スクリプトファイルがロードされているためだという

var pages = document.querySelectorAll(".pag-base a"); console.log(pages[0].textContent); 
 
for(var i =0; i < pages.length; i++){ 
 
    console.log(pages[i].textContent); 
 
}

<div id="paginacao"> 
 
    <div class="pag-base"> <a href="#">{{1}}</a> </div> 
 
    <div class="pag-base"><a href="#">{{2}}</a></div> 
 
    <div class="pag-base"><a href="#">{{3}}</a></div> 
 
    <div class="pag-base"><a href="#">{{4}}</a></div> 
 
    <div class="pag-base"><a href="#">{{5}}</a></div> 
 
    <div class="pag-base"><a href="#">{{6}}</a></div> 
 
    <div class="pag-base"><a href="#">{{7}}</a></div> 
 
    <div class="pag-base"><a href="#">{{8}}</a></div> 
 
    <div class="pag-base"><a href="#">{{9}}</a></div> 
 
    <div class="pag-base"><a href="#">{{10}}</a></div> 
 
    <div class="pag-base"><a href="#">...</a></div> 
 
    </div>

Answer 2

下記を参照してください。

はあなたdiv tag