大家好,我遇到了一个问题,我正在创建一个 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时,它给了我对象对象。我不知道该怎么做,我快疯了,请帮助!!!
最佳答案
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>
关于javascript - 如何让innerhtml接近span id javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44595001/