📌  相关文章
📜  HTML | DOM firstChild 属性(1)

📅  最后修改于: 2023-12-03 14:41:47.735000             🧑  作者: Mango

HTML | DOM firstChild 属性

概述

firstChild属性是DOM中的一个对象，该对象代表某个节点的第一个子节点。通常用于访问文档树（document tree）中的节点。

用法
语法
nodeObject.firstChild

其中，nodeObject是一个节点对象，可以是document对象、一个元素节点对象等等。返回值是一个节点对象，即nodeObject节点的第一个子节点。如果该节点没有子节点，则返回null。

实例

以下是一个HTML代码片段：

<body>
    <div id="container">
        <p>This is a paragraph.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
</body>

若要获取<div>元素节点的第一个子节点，可以使用如下代码：

var containerNode = document.getElementById("container");
var firstChildNode = containerNode.firstChild;
console.log(firstChildNode); // 输出 <p>This is a paragraph.</p>
注意事项
  • 该属性只读，不能修改。
  • 如果该节点的第一个子节点是一个空白文本（即只包含空格、回车等格式字符），使用firstChild属性也会返回该空白文本节点。在这种情况下，建议使用firstElementChild属性，该属性会跳过空白文本节点，直接返回第一个元素节点。
结论

firstChild属性是HTML DOM中非常常用的一个属性，用于获取某个节点的第一个子节点。但需要注意的是，如果第一个子节点是空白文本，使用firstChild属性会返回该节点，不太方便操作，建议使用firstElementChild属性来获取第一个元素节点。