Как получить значение элемента путем обхода DOM

Question

Я пересекаю DOM, чтобы получить значение ячейки данных таблицы. Чтобы быть более конкретным, следующий бит обхода:

const nodeLis = target.parentElement.parentElement.childNodes;

возвращает мне список узлов, который содержит:

NodeList 
0 #text " "
1 <td>title1</td>
2 #text " "
3 <td>title2</td>
4 #text " "
5 <td>title3</td>
6 #text " "

Теперь я хочу получить значения ячеек данных таблицы, в частности, «title1», «title1» и «title3»

Теперь я попытался проиндексировать список childNodes, выполнив

console.log(nodeLis[1]);

Но меня это достает

<td>title1</td>

и я не уверен, как извлечь из него фактическое значение title1

Answer 1

console.log(nodeLis[1].textContent);

Answer 2

Вы можете использовать document.querySelectorAll () для этой цели.После этого вы можете перебирать NodeList и использовать innerHTML для получения значений отдельных дочерних узлов.

document.querySelectorAll('td').forEach(x => {
  console.log(x.innerHTML);
})

<table>
  <tr>
    <td>Title 1</td>
    <td>Title 2</td>
    <td>Title 3</td>
  </tr>
</table>

---

РЕДАКТИРОВАТЬ 1: Вместо innerHTML вы можете использовать textContent вместо этого, как объяснено на этой другой ссылке Я нашел.Благодарю @German за его ответ на его пост и @Brilliand за то, что он указал на улучшения.

Answer 3

Вы можете получить содержимое элемента, посмотрев на свойство innerHTML

console.log(nodeLis[1].innerHTML);