在 JavaScript 中按类获取子元素
Mehvish Ashiq
2023年10月12日
-
在 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 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element-one">One</li>
<li class="child-element-two">Two</li>
<li class="child-element-three">Three</li>
<li class="child-element-four">Four</li>
</ul>
</body>
</html>
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 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element">One</li>
<li class="child-element">Two</li>
<li class="child-element">Three</li>
<li class="child-element">Four</li>
</ul>
</body>
</html>
JavaScript 代码：
var parent = document.getElementById('parent-element');
var allChildElements = parent.querySelectorAll('.child-element');
for (i = 0; i < allChildElements.length; i++)
document.writeln(allChildElements[i].innerHTML);
输出：
querySelectorAll() 方法选择具有相同 class 名称的所有子节点。它返回节点列表并在任何无效选择器的情况下显示 SYNTAX_ERR。
在 JavaScript 中将 document.getElementById() 与子节点的属性一起使用
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element-one">One</li>
<li class="child-element-two">Two</li>
<li class="child-element-three">Three</li>
<li class="child-element-four">Four</li>
</ul>
</body>
</html>
JavaScript 代码：
var parent = document.getElementById('parent-element');
var firstChild = parent.firstElementChild;
var lastChild = parent.lastElementChild;
document.writeln(
'The innerHTML of First Child Element is "' + firstChild.innerHTML + '"' +
' and The innerHTML of Last Child Element is "' + lastChild.innerHTML +
'"');
输出：
这里，firstElementChild 返回第一个子元素节点，lastElementChild 返回最后一个子元素节点。我们还可以如下获取所有子 Element 节点。
JavaScript 代码：
var parent = document.getElementById('parent-element');
var allChild = parent.children;
for (i = 0; i < allChild.length; i++) document.writeln(allChild[i].innerHTML);
输出：
在 JavaScript 中使用 getElementsByClassName() 方法通过 class 名称获取一个或多个子元素
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element">One</li>
<li class="child-element">Two</li>
<li class="child-element">Three</li>
<li class="child-element">Four</li>
</ul>
</body>
</html>
JavaScript 代码：
var childs = (document.getElementById('parent-element'))
.getElementsByClassName('child-element');
for (i = 0; i < childs.length; i++) document.writeln(childs[i].innerHTML);
输出：
getElementsByClassName() 是一个只读属性，有助于获取具有相同 class 名称的所有子节点。
在 JavaScript 中使用 :scope 来获取直接的子元素
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element-one">One</li>
<li class="child-element-two">Two</li>
<li class="child-element-three">Three</li>
<li class="child-element-four">Four</li>
</ul>
</body>
</html>
JavaScript 代码：
var parent = document.getElementById('parent-element');
var childs = parent.querySelectorAll(':scope > li');
for (i = 0; i < childs.length; i++) document.writeln(childs[i].innerHTML);
输出：
我们正在使用一个名为 :scope 的伪类，它对于获取直接子代非常有用，这意味着我们已经访问过的元素的直接后代。
作者： Mehvish Ashiq
