javascript - HTML 元素数组未定义

Question

想要使用 document.querySelectorAll() 获取元素列表并将其转换为数据数组(具体来说，每个 <h3> 标记中的文本)。我正在通过循环执行此操作，并且想将其推送到数组中。我正在尝试这样做:

function pushArray(e){
  var filterItems = document.querySelectorAll('.filter-title');
  var filterItemsTitle = filterItems.innerHTML;
  var arr = [];
  for (var i = 0; i < filterItems.length; i++) {
    arr.push(filterItemsTitle);
    console.log(arr)
  }
}

<section class="authors-titles">
      <div class="filter-item">
        <div class="filter-item">
          <h3 class="filter-title">title 1</h3>
          <h3 class="filter-title">title 2</h3>
          <h3 class="filter-title">title 3</h3>
        </div>
      </div>
      <div class="filter-item">
        <div class="filter-item">
          <h3 class="filter-title">title 4</h3>
          <h3 class="filter-title">title 5</h3>
          <h3 class="filter-title">title 6</h3>
        </div>
      </div>
</section>

<button onClick="pushArray()">Push to Array in Console</button>

这是我不明白的:

在堆栈片段中，您会看到所有内容都是未定义的 - 为什么？是因为我没有将正确的值插入数组吗？不过我想要标题，这就是我要传递到数组中的内容，所以这不是值应该是什么吗？

我也很难理解为什么我会得到多个数组。我只想要一个数组。我在这里很困惑。

Answer 1

filterItems.innerHTML 不返回任何内容。 filterItems 是一个集合，而不是特定元素，因此它没有任何 innerHTML。您需要在循环中使用 filterItems[i].innerHTML。

function pushArray(e) {
  var filterItems = document.querySelectorAll('.filter-title');
  var arr = [];
  for (var i = 0; i < filterItems.length; i++) {
    arr.push(filterItems[i].innerHTML);
  }
  console.log(arr)
}

<section class="authors-titles">
  <div class="filter-item">
    <div class="filter-item">
      <h3 class="filter-title">title 1</h3>
      <h3 class="filter-title">title 2</h3>
      <h3 class="filter-title">title 3</h3>
    </div>
  </div>
  <div class="filter-item">
    <div class="filter-item">
      <h3 class="filter-title">title 4</h3>
      <h3 class="filter-title">title 5</h3>
      <h3 class="filter-title">title 6</h3>
    </div>
  </div>
</section>

<button onClick="pushArray()">Push to Array in Console</button>