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

【问题标题】：Javascript - Access multiple nested elements with Chrome ExtensionJavascript - 使用 Chrome 扩展访问多个嵌套元素
【发布时间】：2019-08-31 01:58:41
【问题描述】：

我正在尝试使用我正在处理的 Chrome 功能获取网站的一些值。我可以使用document.querySelector(".listing-name").textContent 获取第一个listing-name，但是我将如何将所有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-listings div 中的所有部分，然后以这种方式获取 listing-name？

【问题讨论】：

querySelectorAll 是您所追求的。它返回匹配选择器的所有元素。
谢谢，不知道我是怎么错过的。你想把它作为答案吗？
花了一些时间，我正在下班的路上:-)

标签： javascript html dom google-chrome-extension

【解决方案1】：

如 cmets 中所述，您正在寻找的方法是 querySelectorAll，它适用于所有具有 querySelector 作为可用方法的元素。 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。

【讨论】：

【解决方案2】：

您可以简单地使用 querySelectorAll : querySelectorAll

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

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

 var matches = document.querySelectorAll("some_selector");
 //then you can access the matched selector with `matches`

【讨论】：