Javascript для получения текстового узла TD с использованием класса TR

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;