Question

想要使用document.querySelectorAll（）获取元素列表，并将其转换为数据数组（特别是每个<h3>标记中的文本）。我通过一个循环来做这个，我想把它推到一个数组。我试图这样做：

＆＃13;

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)
  }
}

＆＃13;

<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>

＆＃13;

这是我不明白的：

在堆栈代码段中，您会看到所有内容都未定义 - 为什么？是因为我没有向数组推送正确的值吗？我想要这些标题，那就是我传入阵列的内容，那么这些值应该是什么？

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

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>

Answer 2

filterItems.innerHTML为undefined，因为filterItems是一个数组，因此不包含innerHTML属性。

innerHTML是为HTML元素定义的，例如：

<h3 class="filter-title">title 1</h3>

请参阅属性以获取这些元素：

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

未定义HTML元素数组

2 个答案: