在指定容器内查找子元素，最直接的方法是使用该容器的 queryselector 或 queryselectorall 方法。这两个方法会在调用它们的元素内部进行搜索，从而自动限制查找范围，无需手动遍历 dom 树。

如何获取单个匹配的子元素

使用 querySelector 可以获取容器内第一个符合 CSS 选择器条件的子元素。如果找不到匹配项，则返回 null。这种方法适用于只需要操作首个匹配元素的场景，例如提取表单中的第一个输入框。

const container = document.getElementById('my-container');
// 查找类名为 'item' 的第一个子元素
const firstItem = container.querySelector('.item');
console.log(firstItem); // 输出 HTMLElement 或 null

如何获取所有匹配的子元素集合

使用 querySelectorAll 可以获取容器内所有符合 CSS 选择器条件的子元素。它返回一个静态的 NodeList，可以通过索引访问或通过 forEach 遍历。这适用于需要对多个子元素进行批量处理的场景，如高亮显示所有错误提示。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

const container = document.getElementById('my-container');
// 查找所有类名为 'error' 的子元素
const errorItems = container.querySelectorAll('.error');
console.log(errorItems.length); // 输出匹配的数量
errorItems.forEach(item => {
  item.style.color = 'red';
});

当子元素不存在时如何处理返回值

当指定的选择器在容器内没有匹配项时，querySelector 返回 null，而 querySelectorAll 返回一个长度为 0 的 NodeList。开发者必须检查这些返回值以避免 TypeError，例如尝试访问 null 的属性或在空列表上调用 forEach。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南