在 JavaScript 中提取元素的第一个子元素

文章目录

    • 使用 Node.firstChild 在 JavaScript 中提取元素的第一个子元素
    • 使用 Node.childNodes 在 JavaScript 中提取元素的第一个子节点
    • 使用 Element.children 在 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,开发语言,ecmascript)