JavaScript QuerySelector 子元素

当使用 querySelector 方法获取元素时，可以通过其子元素进行更有效的搜索。本文将介绍如何使用 querySelector 方法的子元素。

语法

element.querySelector(selector)

querySelector 方法需要一个 CSS 选择器作为参数。

示例

在下面的示例中，我们使用 querySelector 方法来查找类名为 parent 的元素并选择其子元素为 child 的元素。

const parent = document.querySelector('.parent');
const child = parent.querySelector('.child');
console.log(child.textContent);

HTML

<div class="parent">
  <div class="child">Hello World!</div>
</div>

输出

Hello World!

在以上示例中，我们首先使用 querySelector 方法选择 class 名为 parent 的元素。接着，我们调用 querySelector 方法选择 class 名为 child 的元素，并输出其文本内容。

总结

querySelector 方法允许我们在指定元素的后代元素中使用 CSS 选择器进行搜索。这使得元素的搜索更加灵活和高效。