如何通過遍歷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);