迹忆客 专注技术分享

在本篇文章中，我们将学习在 JavaScript 中提取元素的第一个子元素。

使用 Node.firstChild 在 JavaScript 中提取元素的第一个子元素

Node.firstChild 返回树中节点的第一个子节点，如果节点没有子节点则返回 null。 这是 Node 接口的只读 firstChild 属性。

语法：

Node.firstChild

例如，我们有一个显示 Hello World! 的段落标签。 它里面的文本在另一个 span 标签中。

HTML 代码：

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript 代码:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.firstChild);

输出:

"#text"

当你在任何浏览器中运行上面的代码时，浏览器的控制台都会显示#text。 这是因为默认情况下会插入一个文本节点，以在段落结束标记和跨度开始标记之间保留空白。

每个空白自动创建一个#text 节点，从单个空格到多个空格、换行符、制表符等。

为避免文本节点问题，您可以从源中删除空格或使用 Element.firstElementChild 仅返回第一个元素节点。

使用 Node.childNodes 在 JavaScript 中提取元素的第一个子节点

Node.childNodes 返回指定元素的子节点的活动 NodeList，索引 0 分配给第一个子节点。 这是 Node 接口的只读 childNodes 属性。

子节点包含项目、文本和评论。

节点集合的元素是对象，而不是字符串。 要从节点对象中检索数据，请使用它们的属性。

例如，要获取第一个子节点的名称，可以使用 elementNodeReference.childNodes[0].nodeName。

默认情况下，ChildNodes 包括所有子节点，包括元素和非元素。 它返回一个包含节点子节点的活动 NodeList。

例如，我们有一个显示 Hello World! 的段落标签。 它里面的文本在另一个 span 标签中。

HTML 代码:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript 代码:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.childNodes[0]);

输出:

"#text"

与上一节类似，默认情况下，插入一个文本节点以在段落标记的末尾和 span 标记的开头之间保留空白。

使用 Element.children 在 JavaScript 中提取元素的第一个子元素

Element.children 属性返回一个实时 HTML 集合，其中包含调用它的元素的所有子元素。

Element.children 和 Node.childNodes 之间的唯一区别是 Element.children 仅包含元素节点，而 Node.childNodes 获取所有子节点，包括非元素节点，如文本和注释。

HTML 集合是节点的 DOM 元素子元素的活动的、有序的集合。 您可以使用 item() 方法访问集合的每个子节点。

例如，我们有一个显示 Hello World! 的段落标签。 它里面的文本在另一个 span 标签中。

HTML 代码：

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript 代码:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.children[0]);

输出:

"Hello World!"

当你在任何浏览器中运行上面的代码时，浏览器的控制台都会显示“Hello World!”。 这是因为此属性仅返回调用节点的 DOM 元素。