在指定容器内查找子元素，最直接的方法是使用该容器的 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 遍历。这适用于需要对多个子元素进行批量处理的场景，如高亮显示所有错误提示。
立即学习“Java免费学习笔记（深入）”；
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。
