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>

在单个命令但不在迭代中工作的命令

1 个答案: