在 JavaScript 中按类获取子元素

您所在的位置：网站首页 › js中如何获取id为menu的节点 › 在 JavaScript 中按类获取子元素

在 JavaScript 中按类获取子元素

2024-07-15 14:41| 来源: 网络整理| 查看: 265

在 JavaScript 中通过 class 获取子元素在 JavaScript 中使用 querySelector() 通过 class 名称获取子元素在 JavaScript 中使用 querySelectorAll() 方法获取具有相同 class 的所有子节点在 JavaScript 中将 document.getElementById() 与子节点的属性一起使用在 JavaScript 中使用 getElementsByClassName() 方法通过 class 名称获取一个或多个子元素在 JavaScript 中使用 :scope 来获取直接的子元素

本教程展示了如何使用 JavaScript 通过 class 获取子元素。它还强调了如何使用它们的 class 名称访问一个子元素（第一个或最后一个子元素）或多个子元素。

让我们开始按顺序学习它们。

在 JavaScript 中通过 class 获取子元素

我们可以通过以下方式在 JavaScript 中通过 class 名称获取一个或多个子元素。

使用 querySelector() 方法。使用 querySelectorAll() 获取所有具有相同 class 的子节点。将 document.getElementById() 与子节点的属性一起使用。使用 getElementsByClassName() 方法。使用 :scope 获得直接子代。在 JavaScript 中使用 querySelector() 通过 class 名称获取子元素

HTML 代码：

Get Child Elements One Two Three Four

JavaScript 代码：

var parent = document.querySelector('#parent-element'); var firstChild = parent.querySelector('.child-element-one'); var lastChild = parent.querySelector('.child-element-four'); document.writeln( 'The innerHTML of First Child Element is "' + firstChild.innerHTML + '"' + ' and The innerHTML of Last Child Element is "' + lastChild.innerHTML + '"');

输出：

我们首先使用 querySelector() 方法来获取父元素。然后，在选中的父元素上再次调用该方法，获取匹配指定选择器的第一个和最后一个子节点。

你可能已经观察到 querySelector() 的范围仅限于此处的特定元素（具有 id parent-element）。这就是为什么它只选择它被调用的元素的子元素。

我们也可以使用 document.getElementById() 来选择父元素。请参阅以下示例，其中我们选择了所有子元素。

在 JavaScript 中使用 querySelectorAll() 方法获取具有相同 class 的所有子节点

HTML 代码：

Get Child Elements One Two Three Four

JavaScript 代码：

var parent = document.getElementById('parent-element'); var allChildElements = parent.querySelectorAll('.child-element'); for (i = 0; i

【本文地址】

在 JavaScript 中按类获取子元素

在 JavaScript 中按类获取子元素

今日新闻

推荐新闻