在 JavaScript 中按类获取子元素

Mehvish Ashiq 2023年10月12日
  1. 在 JavaScript 中通过 class 获取子元素
  2. 在 JavaScript 中使用 querySelector() 通过 class 名称获取子元素
  3. 在 JavaScript 中使用 querySelectorAll() 方法获取具有相同 class 的所有子节点
  4. 在 JavaScript 中将 document.getElementById() 与子节点的属性一起使用
  5. 在 JavaScript 中使用 getElementsByClassName() 方法通过 class 名称获取一个或多个子元素
  6. 在 JavaScript 中使用 :scope 来获取直接的子元素
在 JavaScript 中按类获取子元素

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

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

在 JavaScript 中通过 class 获取子元素

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

  1. 使用 querySelector() 方法。
  2. 使用 querySelectorAll() 获取所有具有相同 class 的子节点。
  3. document.getElementById() 与子节点的属性一起使用。
  4. 使用 getElementsByClassName() 方法。
  5. 使用 :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 +
    '"');

输出:

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

输出:

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

我们正在使用一个名为 :scope 的伪类,它对于获取直接子代非常有用,这意味着我们已经访问过的元素的直接后代。

作者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相关文章 - JavaScript Element