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 开始。&nbsp;var matches = document.querySelectorAll("some_selector");&nbsp;//then you can access the matched selector with `matches`

Answer 2

如评论中所述，您正在寻找的方法（可用于所有具有querySelector可用方法的元素）是querySelectorAll. 而querySelector返回匹配的第一个元素，querySelectorAll匹配任何元素并将它们作为数组返回。因此，在您的示例中，如果您要获取所有内容active-listings以获取子元素的内部文本，您只需这样做（ES6）：window.onload = () => {&nbsp; document.querySelectorAll(".active-listings .listing-name").forEach((element) => {&nbsp; &nbsp; console.log(element.innerText);&nbsp; });};<ul>&nbsp; <li class="active-listings">&nbsp; &nbsp; <h3 class="listing-name">Test</h3>&nbsp; </li>&nbsp; <li class="active-listings">&nbsp; &nbsp; <h3 class="listing-name">Test</h3>&nbsp; </li>&nbsp; <li class="active-listings">&nbsp; &nbsp; <h3 class="listing-name">Test</h3>&nbsp; </li>&nbsp; &nbsp; <li class="active-listings">&nbsp; &nbsp; <h3 class="listing-name">Test</h3>&nbsp; </li></ul>如果您的嵌套更复杂，或者您需要进行额外的处理，active-listings也可以仅选择。