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 ，而不是您期望的 DOMelement 。如果删除这些空格

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

您的提醒可能有效，但您需要再次访问.firstChild，因为浏览器会将表格部分（tbody）插入{{} 1}}树自动为你。

DOM

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

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

无论如何，在现代浏览器中，您只需document.getElementsByClassName("abc")[0] .firstChild /* tableSection DOM element */ .firstChild /* tableRow DOM element */ .firstChild /* tableCell DOM element */ .firstChild /* textNode */ .nodeValue /* 123 */;

即可访问该元素

如何使用.firstChild导航节点

1 个答案: