使用 JavaScript 按 ID 获取子元素

通过 id 获取子元素:

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

这是文章中示例的 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 代码。

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

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

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

在这种情况下,我们可以使用 ocument.getElementById 方法来获得相同的结果,例如:

const parent = document.getElementById('parent');

请注意,当使用 querySelector 方法时,我们在 id 前面加上一个哈希 #,而在使用 getElementById 时 – 我们没有。

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

当 querySelector 方法作用于特定元素时,它只选择调用该方法的元素的子元素。

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

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

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 的元素可能会导致令人困惑的行为和难以跟踪的错误。