Javascript - 使用 Chrome 扩展访问多个嵌套元素

Question

我正在尝试使用我正在处理的 Chrome 功能获取网站的某些值。我能够获取第一个listing-nameusing document.querySelector(".listing-name").textContent，但是我将如何将所有内容提取listing-name到一个数组中？DOM结构<div class="container">    <div class="active-listings">        <section class="listing">            <div class="listing-info">                <h3 class="listing-name">Listing 1</h3>            </div>        </section>        <section class="listing">            <div class="listing-info">                <h3 class="listing-name">Listing 2</h3>            </div>        </section>    </div></div>我是 Javascript 的新手，所以不完全熟悉正确的语法。但是，我假设我需要循环active-listingsdiv 中的所有部分，然后以listing-name这种方式获得，是否正确？

Answer 1

您可以简单地使用querySelectorAll：querySelectorAll

该querySelectorAll()方法将文档中与指定 CSS 选择器匹配的所有元素作为静态 NodeList 对象返回。

NodeList 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始。

 var matches = document.querySelectorAll("some_selector");

 //then you can access the matched selector with `matches`

Answer 2

如评论中所述，您正在寻找的方法（可用于所有具有querySelector可用方法的元素）是querySelectorAll. 而querySelector返回匹配的第一个元素，querySelectorAll匹配任何元素并将它们作为数组返回。

因此，在您的示例中，如果您要获取所有内容active-listings以获取子元素的内部文本，您只需这样做（ES6）：

window.onload = () => {

  document.querySelectorAll(".active-listings .listing-name").forEach((element) => {

    console.log(element.innerText);

  });

};

<ul>

  <li class="active-listings">

    <h3 class="listing-name">Test</h3>

  </li>

  <li class="active-listings">

    <h3 class="listing-name">Test</h3>

  </li>

  <li class="active-listings">

    <h3 class="listing-name">Test</h3>

  </li>

    <li class="active-listings">

    <h3 class="listing-name">Test</h3>

  </li>

</ul>

如果您的嵌套更复杂，或者您需要进行额外的处理，active-listings也可以仅选择。