如何通过遍历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： 如我在其他link上所解释的，您可能不想使用innerHTML，而要使用textContent。感谢@German对他的帖子的回答，以及@Brilliand指出改进之处。

Answer 3

您可以通过查看innerHTML属性来获取元素的内容

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