如何获取没有 Id 或标记名的 html 的文本内容？

Question

我正在开发一个供个人使用的 chrome 扩展（使用 Javascript），它会抓取一些数据并将其导出到 csv 文件，现在我在提取一些文本节点时遇到问题，因为它们的选择器（chrome css 选择器）会根据如何变化而变化存在许多具有相同类别但内容不同的标签。这是 Html 的示例：<li class="sc-account-rows__row"><div class="sc-account-rows__row__label">RTF</div> // Title Label<div class="sc-account-rows__row__price--container"><div class="sc-account-rows__row__price">-$ 1.485</div> // Price Label <- How to get This?</div></li><li class="sc-account-rows__row"><div class="sc-account-rows__row__label">some text</div> // Another Label<div class="sc-account-rows__row__price--container"><div class="sc-account-rows__row__price">-$ 2.418</div> // Another price which I don't need but has same class</div></li>换句话说，这个特定标签的选择器可以是：#root-app > div > div.sc-account-section > div.sc-account-section__container > div.sc-account-module > div:nth-child(3) > ul > li:nth-child(1) > div.sc-account-rows__row__price--container > div或者#root-app > div > div.sc-account-section > div.sc-account-section__container > div.sc-account-module > div:nth-child(3) > ul > li:nth-child(9) > div.sc-account-rows__row__price--container > divAs you can see there is no Id or Name assigned to this particular label, I was using (successfully) this piece of code when the selector was always the same. （注意这是在 iframe 中）var RTF_fee = "#root-app > div > div.sc-account-section > div.sc-account-section__container > div.sc-account-module > div:nth-child(3) > ul > li:nth-child(4) > div.sc-account-rows__row__price--container > div";    if (iframe_document.body.contains(iframe_document.querySelector(RTF_fee))) {        RTF_value = iframe_document.querySelector(RTF_fee).textContent;        console.log(RTF_value);    }    else {        RTF_value = "0";        console.log(RTF_value);    }所以，问题是：如果我没有唯一的选择器/ID，如何获取价格标签中的文本内容？我想我可以处理价格标签类别始终为“sc-account-rows__row__price”并且价格之前的标签文本始终为“RTF”的事实，但我不知道如何编码或者是否有更好的选择。我为我糟糕的“编程”语言道歉，我只是一个临时程序员）提前致谢。

Answer 1

如果我正确理解你的问题，这就是你要找的。

let labels = document.querySelectorAll(".sc-account-rows__row__label");

[...labels].forEach(label => {

  if (label.innerText === "RTF") {

    let price = label.parentElement.querySelector(".sc-account-rows__row__price").innerText;

    console.log(price);

  }

})

Console: "-$ 1.485"

如果您需要使用除 RTF 之外的额外标签：

let words = ["RTF", "something", "else"];

// change if condition to

if (words.includes[label.innerText]) {...}

Answer 2

另一种方法是使用 XPath，这是一种旧的 XML 导航标准，也适用于 HTML。在本例中，您正在寻找一个类div为“sc-account-rows__row__price”的类，它div附近有另一个类为“sc-account-rows__row__label”且文本为“RTF”的类。

div 的 XPath 是

//div[@class="sc-account-rows__row__label"][text()="RTF"]/following-sibling::div[@class="sc-account-rows__row__price--container"]//div[@class="sc-account-rows__row__price"]

由于 price--container/price 的嵌套性质，它有点复杂div。

要获取文本，您将使用document.evaluate：

function getPriceByLabel(label) {

  // change this to a parent element if you can; it will speed up the process.

  const contextNode = document;

  const priceResults = document.evaluate(`//div[@class="sc-account-rows__row__label"][text()="${label}"]/following-sibling::div[@class="sc-account-rows__row__price--container"]//div[@class="sc-account-rows__row__price"]`, contextNode, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null);

  const priceElement = priceResults.singleNodeValue;

  const price = priceElement.textContent;

  return price;

}

console.log(getPriceByLabel("RTF"));

console.log(getPriceByLabel("some text"));

<li class="sc-account-rows__row">

  <div class="sc-account-rows__row__label">RTF</div>

  <div class="sc-account-rows__row__price--container">

    <div class="sc-account-rows__row__price">-$ 1.485</div>

  </div>

</li>

<li class="sc-account-rows__row">

  <div class="sc-account-rows__row__label">some text</div>

  <div class="sc-account-rows__row__price--container">

    <div class="sc-account-rows__row__price">-$ 2.418</div>

  </div>

</li>

我把它放在一个带有标签并吐出价格的函数中。