使用 JavaScript 通过Tag名称获取子元素

作者

使用 JavaScript 通过Tag名称获取子元素

Get Child Elements by Tag name using JavaScript

使用该querySelectorAll方法通过标签名称获取所有子元素。例如，document.querySelectorAll('#parent div')选择作为具有 idparent 的元素div的后代的所有元素。

以下是本文示例的 HTML。

索引.js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="parent">
      <div>Child 1</div>
      <div>Child 2</div>
      <span>Child 3</span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const children = document.querySelectorAll('#parent div');
console.log(children); // 👉️ [div, div]

我们使用
document.querySelectorAll
方法来选择属于具有 of 的元素的所有
子div元素。idparent

您也可以通过两个简单的步骤获得相同的结果。

索引.js
const parent = document.querySelector('#parent');
console.log(parent); // 👉️ div#parent

const children = parent.querySelectorAll('div');
console.log(children); // 👉️ [div, div]

对该document.querySelector方法的调用通过其选择了父元素id。

在这种情况下，您可以使用该document.getElementById方法来获得相同的结果，例如：

索引.js
const parent = document.getElementById('parent');

下一步是调用querySelectorAll父元素上的方法。

当该querySelectorAll方法的范围限定为特定元素时，它只会选择调用该方法的元素的子元素。

该querySelectorAll方法返回一个NodeList包含与提供的选择器匹配的元素的 。

请注意，通过将标记名称传递给方法的方法，我们正在选择元素的任何子元素。 querySelectorAll

这包括作为元素的嵌套子div元素。

如果只想定位 DOM 元素的直接子元素，请使用:scope
伪类选择器。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="parent">
      <div>
        Child 1
        <div>Nested Child 1</div>
      </div>
      <div>Child 2</div>
      <span>Child 3</span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const parent = document.querySelector('#parent');
console.log(parent); // 👉️ div#parent

const children = parent.querySelectorAll(':scope > div');
console.log(children); // 👉️ [div, div]

我们使用:scope伪类来选择

父元素的直接子div元素。

即使有一个也是 a 的嵌套元素div，它也没有被选中。

当与querySelectorand等方法一起使用时querySelectorAll，:scope
匹配调用该方法的元素（父元素）。

您也可以一步完成：

索引.js
const children = document.querySelectorAll('#parent > div');
console.log(children); // 👉️ [div, div]

如果您不需要访问父元素，则可以使用该
querySelectorAll方法的单个调用来通过特定标记名称获取元素的直接子元素。

–

发表评论