JavaScript获取元素第一个子节点的三种方式：firstChild、childNodes与children

本文将介绍如何在 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”。这是因为浏览器默认会在段落结束标签和 span 开始标签之间插入一个文本节点，用于保留空白字符。

所有的空白字符（包括单个空格、多个空格、换行符、制表符等）都会自动创建一个“#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 元素。

到此这篇关于JavaScript提取元素中第一个子元素的实现方法的文章就介绍到这了,更多相关JavaScript提取子元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！