Javascript 使用 tr class 获取 td 的文本节点

Question

我有以下代码：

<table>
  ...
[Multiple lines ommited for brevity]

<tr class="bibItemsEntry"> 
<td width="31%" ><!-- field 1 -->&nbsp;Archives, Thesis Col. Graduate, 12F (Mezz.) Henry Sy Sr. Hall 
</td>
<td width="46%" ><!-- field C -->&nbsp;<a href="/search~S1?/cCDTG006829/ccdtg006829/-3,-1,,E/browse">CDTG006829</a> <!-- field v --><!-- field # -->&nbsp;<!-- field ! -->&nbsp;ROOM USE ONLY</td>
<td width="23%" ><!-- field % -->&nbsp;CHECK SHELF </td></tr>
</table>

<p id="demo">Test</p>

我想做的是用javascript，得到<tr class="bibItemsHeader">下<td>的文本节点的第一个值。我正在尝试将值放入 <p id="demo">。我正在尝试下面的 javascript 代码：

var x = document.getElementsByClassName("bibItemsEntry");
document.getElementById("demo").innerHTML = x[0].innerHTML;

但我正在获取所有 td 文本节点值。有人可以帮我解决问题吗？提前致谢！

Answer 1

您正在选择 tr 元素，而不是您真正想要的第一个 td。试试这个：

const td = document.querySelector('.bibItemsEntry td:first-child');
const p = document.getElementById('demo');
p.innerHTML = td.textContent;

Answer 2

const x = document.getElementsByClassName("bibItemsEntry")[0].firstElementChild.innerHTML;
const p = document.getElementById('demo');
p.innerHTML = td.textContent;

Javascript 使用 tr class 获取 td 的文本节点

Javascript to get text node of td using tr class

html

javascript

class

innerhtml

tr