使用 JavaScript 通过 ID 获取子元素

作者

使用 JavaScript 通过 ID 获取子元素

Get Child Element by ID using JavaScript

通过 id 获取子元素：

  1. 使用document.querySelector()方法获取父元素。
  2. 在父元素上调用该querySelector方法，将 id 作为参数传递给它。
  3. 例如，parent.querySelector('#first')获取 id 的孩子first。

这是文章中示例的 HTML。

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

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

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

这是相关的 JavaScript 代码。

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

const child = parent.querySelector('#first');
console.log(child); // div#first

我们使用
document.querySelector
方法通过其获取父元素id。

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

索引.js
const parent = document.getElementById('parent');
请注意，在使用该querySelector方法时，我们在 id 前面加上散列前缀，#而在使用时getElementById– 我们没有。

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

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

该Element.querySelector方法返回与提供的选择器匹配的第一个元素。

在示例中，我们选择了一个id值设置为的子元素first。

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

const child = parent.querySelector('#first');
console.log(child); // div#first
将 传递id给querySelector方法时，我们选择元素的任何子元素。

这包括具有提供的 id 的嵌套子项。

但是，这无关紧要，因为您页面上的 ID 应该是唯一的。

在单个页面上拥有多个具有相同 id 的元素可能会导致混乱的行为并且难以跟踪错误。

–

发表评论