JavaScript提取元素中第一个子元素的实现方法

在本篇文章中，我们将学习在 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 元素。

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