如何获取没有 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 > div

As 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 => {&nbsp; if (label.innerText === "RTF") {&nbsp; &nbsp; let price = label.parentElement.querySelector(".sc-account-rows__row__price").innerText;&nbsp; &nbsp; console.log(price);&nbsp; }})Console: "-$ 1.485"如果您需要使用除 RTF 之外的额外标签：let words = ["RTF", "something", "else"];// change if condition toif (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>我把它放在一个带有标签并吐出价格的函数中。