在 JavaScript 中提取元素的第一个子元素 |
您所在的位置:网站首页 › jq查找第一个子元素 › 在 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 代码: Hello World!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 代码: Hello World!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 代码: Hello World!JavaScript 代码: const firstPara = document.getElementById('firstPara'); console.log(firstPara.children[0]);输出: "Hello World!"当你在任何浏览器中运行上面的代码时,浏览器的控制台都会显示“Hello World!”。 这是因为此属性仅返回调用节点的 DOM 元素。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |