使用 JavaScript 按 ID 获取子元素
通过 id 获取子元素：
-
使用
document.querySelector()方法获取父元素。 -
在父元素上调用
querySelector方法，将 id 作为参数传递给它。 -
例如，
parent.querySelector('#first')首先获取具有 id 的孩子。
这是文章中示例的 HTML。
index.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 代码。
index.jsconst 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 的元素可能会导致令人困惑的行为和难以跟踪的错误。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
