javascript - 如何让innerhtml接近span id javascript

Question

大家好，我遇到了一个问题，我正在创建一个 google chrome 扩展程序，它可以从网站中提取一些信息并将其保存在 txt 文件中。

问题是我想提取靠近span ID的innerhtml数据，这是我需要能够提取的代码:

        <tr class="gridRow_even">
        <td class="fieldLabel_150">
            Date
        </td>
        <td>


            <span id="123"></span>
            12/20

        </td>
    </tr>

我想保存的是txt上的12/20，通常我确实通过ID获取元素，但在这种情况下我不知道如何获取它，我也尝试使用jquery这样做:

var DT = $("td:contains(/)")

但是当我尝试将提取的数据另存为txt时，它给了我对象对象。我不知道该怎么做，我快疯了，请帮助!!!

Answer 1

const text = Array.prototype.filter.call(document.querySelectorAll('td'), el => el.querySelector('span#a123'))[0].innerText;
console.log(text);

<table>
  <tr class="gridRow_even">
    <td class="fieldLabel_150">Date</td>
    <td>
      <span id="a123"></span>
      12/20
    </td>
  </tr>
</table>

在解释之前，先简要说明一下此示例:

• document.querySelector('td')除非它位于正确的表中，否则似乎不起作用。您的真实示例可能是 <table> ，所以这是一个有争议的问题。如果不是，您需要想出一种稍微不同的方法来查找它(这可能是另一个答案的主题)。
• 123不是有效的 ID。 id 必须以字母开头。再说一次，你真正的目标可能是名字很好。如果确实以数字开头，请使用 el.querySelector('span[id=123]')相反。

至于代码，基本都是用document.querySelectorAll('td')获取所有 td元素(如果它们位于特定表中，也使用该表，例如 '#tableId td' )。

然后，我用了 Array.prototype.filter()过滤所有td元素，查找包含我们想要查找的跨度的任何元素。不得不使用Array.prototype.filter.call()因为 document.querySelectorAll() 的结果实际上是一个NodeList ，它类似于数组，但不是实际的数组。

过滤后，我只需从过滤器中获取第一个元素并得到它的 innerText .

如果可能有多个td有 span在页面中，使用.map(el => el.innerText)而不是[0].innerText创建一个包含所有值的数组。

另一种方法是查找所有 <span>元素，然后循环并获取它们的每个 parentNode元素。但这需要 <span>是 <td> 的直接子级，因此根据您的实际用例，可能不太灵活。

const text = Array.prototype.map.call(document.querySelectorAll('span#a123'), el => el.parentNode)[0].innerText;
console.log(text);

<table>
  <tr class="gridRow_even">
    <td class="fieldLabel_150">Date</td>
    <td>
      <span id="a123"></span>
      12/20
    </td>
  </tr>
</table>

如果您确定它只会是一个跨度，您可以使用它:

const text = document.querySelector('span#a123').parentNode.innerText;
console.log(text);

<table>
  <tr class="gridRow_even">
    <td class="fieldLabel_150">Date</td>
    <td>
      <span id="a123"></span>
      12/20
    </td>
  </tr>
</table>