Question

我正在尝试使用我正在使用的Chrome功能来获取网站的某些值。我可以使用listing-name来获取第一个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>

我是Java语言的新手，所以并不完全了解正确的语法。但是我是否假设我需要循环active-listings div中的所有节，然后以这种方式获取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匹配 any 并将它们作为数组返回。

结果，在您的示例中，如果要获取所有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也是可能的。

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

2 个答案: