Javascript使用tr类获取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并获取<td>下<tr class="bibItemsHeader">的文本节点的第一个值。我正在尝试将值放入<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;