用 element.queryselector 替代 document.queryselector 能显著提升查询性能，核心在于缩小 dom 遍历范围；应锚定已知容器、配合事件委托、缓存父级引用，并注意选择器作用域与语义准确性。

用 element.querySelector 替代 document.querySelector 能显著提升查询性能，核心在于缩小 DOM 遍历范围——浏览器不用从整个文档树开始搜索，而是直接在已知的、更小的子树中查找。

只在必要范围内启动查询

全局查询（如 document.querySelector('.btn')）每次都要遍历全部节点，尤其在 SPA 或复杂页面中开销明显。若目标元素已确定在某个容器内（比如一个卡片、弹窗或列表项），就该把查询“锚定”到那个容器上：

• ✅ 正确： card.querySelector('.delete-btn')（card 是已获取的 DOM 元素）
• ❌ 低效： document.querySelector('.delete-btn')（可能匹配到其他区域的同名按钮）

配合事件委托与动态上下文使用

在列表渲染或动态插入场景中，不要为每个新元素重复绑定事件或查询；而是在父容器上监听，并用 event.target.closest() 定位触发源，再基于该源做局部查询：

• 例如点击某行中的操作按钮，先 const row = event.target.closest('tr')，再 row.querySelector('.status-badge') 获取状态元素
• 避免反复调用 document.querySelectorAll 或循环遍历所有行去查 badge

缓存父级引用，避免重复获取

如果同一容器需多次查询不同子元素，先缓存该容器引用，而不是每次都重新查一遍父级：

• ✅ 推荐：const form = document.getElementById('user-form');
  const nameInput = form.querySelector('#name');
  const emailInput = form.querySelector('#email');
• ❌ 不推荐：document.getElementById('user-form').querySelector('#name');
  document.getElementById('user-form').querySelector('#email');（两次重复查找 form）

注意作用域隔离与选择器有效性

局部查询仍遵循 CSS 选择器规则，但仅限于该元素的后代（不包括自身）。需确保选择器语义准确：

• el.querySelector('span') 只找 el 内部的 <span></span>，不会匹配 el 自身（即使它是个 span）
• 若需包含自身，可用 el.matches('.target') ? el : el.querySelector('.target') 或改用 el.closest('.target')
• 避免过度依赖 class 名全局唯一性——局部查询本意就是解耦，应优先用结构关系（如 .item .price）而非泛化类名