如何使用 .firstChild 导航节点

Question

假设我们有这样的东西：

<table class="abc">
    <tr>
        <td>123</td>
    </tr>
    <tr>
    </tr>
</table>

我不想显示此值：为什么不正确：

alert(document.getElementsByClassName("abc")[0].firstChild.firstChild.firstChild.nodeValue);

那就是：

alert(document.getElementsByClassName("abc")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[0].firstChild.nodeValue);

？

Answer 1

警报不起作用的原因是由于标记之间的换行符和空格： 如果您尝试发出警报

document.getElementsByClassName("abc")[0].firstChild

使用您提供的代码，您将获得一个 textNode，而不是您期望的 DOM元素。如果删除这些空格

<table class="abc"><tr><td>123</td></tr></table>

您的警报可能有效，但您需要再次访问.firstChild，因为浏览器会自动将表部分元素（tbody）插入到DOM树中。

document.getElementsByClassName("abc")[0]
   .firstChild    /* tableSection DOM element */
   .firstChild    /* tableRow DOM element */
   .firstChild    /* tableCell DOM element */
   .firstChild    /* textNode */
   .nodeValue     /* 123 */

请参阅此代码笔示例：http://codepen.io/anon/pen/IAeJl

---

在第二个示例中，问题不存在，仅仅是因为您正在访问表行和表单元格，无论它们是否是其祖先节点的 firstChild 节点

无论如何，在现代浏览器上，您只需通过 document.querySelector('.abc td') ;