在 JavaScript 中按类获取子元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中按类获取子元素

作者：迹忆客最近更新：2023/03/10 浏览次数：

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

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

在 JavaScript 中通过 `class` 获取子元素

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

在 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 + "\"");

输出：

使用 javascript 按类获取子元素-输出一

我们首先使用 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);

输出：

使用 javascript 按类获取子元素-输出二

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 + "\"");

输出：

使用 javascript 按类获取子元素 - 输出三

这里，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 按类获取子元素 - 输出四

在 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);

输出：

使用 javascript 按类获取子元素 - 输出五

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);