在單個命令中工作但不在迭代中的命令

Question

我嘗試從特定document.querySelectorAll（）的迭代中獲取列表。我用這個迭代：

for (i = 0; i < document.querySelector('li[dat*="era"]').length; ++i) { document.querySelectorAll('li[dat*="era"] ul li.title div')[i].textContent } 

它給我回個錯誤：

Uncaught TypeError: Cannot read property 'textContent' of undefined at <anonymous>:2:64 

它只能當我使用一個單值

document.querySelectorAll('li[dat*="era"] ul li.title div')[0].textContent 

怎麼可能作爲一個工作單一的命令，但不是一個迭代？

例HTML：

<li id="r01" dat="era"> 
    <ul class="ref"> 
     <li class="sth"> </li> 
     <li class="title"> 
      <div> 
       Text 1 for retrieve 
      </div> 
     </li> 
    <ul> 
</li> 
<li id="r02" dat="era"> 
    <ul class="ref"> 
     <li class="sth"> </li> 
     <li class="title"> 
      <div> 
       Text 2 for retrieve 
      </div> 
     </li> 
    <ul> 
</li> 

Answer 1

嘗試

下面的代碼片斷

// Your code, doesnt throw error what you have specified. 
 
// But when document.querySelector returns null(when theres no specified tag, it throws 
 

 
for (i = 0; i < document.querySelector('li[dat*="era"]').length; ++i) { document.querySelectorAll('li[dat*="era"] ul li.title div')[i].textContent } 
 

 

 
// Use document.querySelectorAll(...) once for performance 
 
var l = document.querySelectorAll('li[dat*="era"] ul li.title div') 
 
for (i = 0; i < l.length; ++i) { 
 
    console.log(l[i].textContent) 
 
}

<li id="r01" dat="era"> 
 
    <ul class="ref"> 
 
    <li class="sth"> sth 1 </li> 
 
    <li class="title"> 
 
     <div> 
 
     Text 1 for retrieve 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</li> 
 
<li id="r02" dat="era"> 
 
    <ul class="ref"> 
 
    <li class="sth">sth 2</li> 
 
    <li class="title"> 
 
     <div> 
 
     Text 2 for retrieve 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</li>