Javascript使用tr类获取多个tds的文本节点

Question

this question is somewhat related to the first question I posted here: Javascript to get text node of td using tr class I have the following codes below:

<table>
  ...
[Multiple div 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>

[multiple divs <tr>s <td>s omitted for brevity]
....
<tr  class="bibItemsEntry">

<td width="31%" ><!-- field 1 -->&nbsp;Shelf 194, 10F Mezzanine (Filipiniana), Henry Sy Sr. Hall 
</td>
<td width="46%" ><!-- field C -->&nbsp;<a href="/search~S1?/cPS3568.O5333+A6+2016/cps+3568+o5333+a6+2016/-3,-1,,E/browse">PS3568.O5333 A6 2016</a> <!-- field v --><!-- field # -->&nbsp;<!-- field ! -->&nbsp;ROOM USE ONLY</td>
<td width="23%" ><!-- field % -->&nbsp;LIB USE ONLY </td></tr>
</table>
<p id="demo">Test</p>

What I wanted to do is to use javascript and get the first value of each occurence of the text node of <td> under <tr class="bibItemsEntry"> and and put into p id=demo (That is into their respective s) . I'm trying to put the value into <p id="demo"> . I'm trying out the below javascript code:

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

[benvc][1] answered the below code, thanks to him/her: 
const td = document.querySelector('.bibItemsEntry td:first-child');
const p = document.getElementById('demo');
p.innerHTML = td.textContent;

it only gets the first iteration which is true enough, I was not able to put that in my first question... Thanks in advance!

Answer 1

You need to loop through the x result like :

 var x = document.getElementsByClassName("bibItemsEntry"); [].forEach.call(x, function(item) { var demo = item.querySelector('.demo'); var firstTd = item.querySelector('td:first-child'); demo.textContent = firstTd.textContent; }); 

 <table id="codexpl" border="1"> <tr> <th>#</th> <th>Text</th> <th>Demo</th> </tr> <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> <p class="demo"></p> </td> </tr> <tr class="bibItemsEntry"> <td width="31%"> <!-- field 1 -->&nbsp;Shelf 194, 10F Mezzanine (Filipiniana), Henry Sy Sr. Hall </td> <td width="46%"> <!-- field C -->&nbsp;<a href="/search~S1?/cPS3568.O5333+A6+2016/cps+3568+o5333+a6+2016/-3,-1,,E/browse">PS3568.O5333 A6 2016</a> <!-- field v --> <!-- field # -->&nbsp; <!-- field ! -->&nbsp;ROOM USE ONLY</td> <td> <p class="demo"></p> </td> </tr> </table> <div id="demo"></div>