如何让 InnerHTML 接近 SPAN ID JavaScript

Question

大家好，我遇到了一个问题，我正在创建一个谷歌浏览器扩展程序，该扩展程序可以从网站中获取一些信息并将它们保存在 txt 文件中。

问题是我想减去一个接近跨度 ID 的内部 html 数据，这是我需要能够减去的代码：

<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 必须以字母开头。同样，您的真正目标可能被命名为"fine"。如果它确实以数字开头，请改用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>

Answer 2

Javascript：

var desired_innerHTML = document.getElementById('123').parentElement.innerHTML;

jQuery

var desired_innerHTML = $('#123').parent().html();

Answer 3

> 12/20是一个文本节点。你可以通过 .nodeType 过滤 .content() 的结果。

var DT = $("td:contains(/)").contents().filter(function(idx, ele) {
return ele.nodeType == Node.TEXT_NODE && ele.textContent.trim().length != 0;
});
console.log('Txt: ' + DT.text().trim())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="gridRow_even">
<td class="fieldLabel_150">
Date
</td>
<td>
<span id="123"></span>
12/20
</td>
</tr>
<tr class="gridRow_even">
<td class="fieldLabel_150">
Date
</td>
<td>
<span id="xxx"></span>

</td>
</tr>
</tbody>
</table>

Answer 4

这是您获得预期输出的方式

$("span#123").parent().text();

简单的Javascript

document.getElementById("123").parentNode.innerText;