根本原因是document.querySelectorAll只匹配DOM属性（attribute），不匹配JS属性（property）；需确保属性显式声明在HTML中或通过setAttribute同步，Shadow DOM需查shadowRoot，动态状态须更新attribute而非property。
document.querySelectorAll 选不到带属性的自定义组件？
根本原因不是语法写错，而是浏览器对自定义元素（如 <my-button></my-button>）的属性匹配逻辑和原生标签完全一致——document.querySelectorAll 只认 DOM 属性（attribute），不认 JavaScript 属性（property）。如果你用 el.disabled = true 设置了禁用状态，但没同步写入 disabled attribute，那么 [disabled] 选择器就查不到它。
实操建议：
- 确保目标组件显式声明了该属性：比如
<my-input data-role="search" value="abc"></my-input>，其中data-role和value是 attribute，可被查询；而el.value = 'xyz'不会自动回写到 attribute，除非组件内部手动调用this.setAttribute('value', 'xyz') - 优先使用
data-前缀属性，语义清晰且兼容性好，避免和原生属性名冲突（如直接用status可能被某些框架劫持） - 若组件是 Web Component（含 Shadow DOM），
querySelectorAll默认查不到 Shadow 内部节点，需先取到shadowRoot再查
批量修改时如何避免重复绑定或状态错乱
常见错误是循环中直接赋值 el.innerHTML = 'xxx' 或反复调用 setAttribute，导致事件监听器丢失、Vue/React 组件被“撕毁”、或者触发多次副作用。
实操建议：
- 用
dataset操作data-属性更安全：els.forEach(el => el.dataset.updated = 'true')，比setAttribute('data-updated', 'true')少一层字符串转换 - 如果要改样式，优先用 class 切换而非内联
style：el.classList.add('highlighted')，方便 CSS 控制且不污染结构 - 对受控组件（如 React 的
<input value="{x}">），不要直接操作value属性，应模拟输入事件或通过其公开 API 更新（例如调用组件实例的setValue()方法）
性能敏感场景下 querySelectorAll 的替代方案
当页面有上千个业务组件，且需高频执行查询+修改（如实时筛选），document.querySelectorAll('[data-type="card"]') 可能成为瓶颈——它每次都是全量遍历，且返回的是静态 NodeList，无法复用。
实操建议：
- 给批量操作区域加唯一容器 class，缩小查询范围：
container.querySelectorAll('[data-role="action-btn"]')，比全局查快 3–5 倍 - 用
MutationObserver监听新增节点，维护一个缓存 Map：const activeButtons = new WeakMap();，只在节点插入时注册，避免重复扫描 - 如果组件自身支持，改用框架提供的 ref 或 context 查找机制（如 Vue 的
ref="list"+this.$refs.list），比 DOM 查询稳定得多
遇到伪类或动态属性时怎么写选择器
:hover、:focus 这类伪类不能用 querySelectorAll 匹配；而像 [aria-expanded="true"] 这种属性，若值由 JS 动态切换但未同步到 attribute，也会查不到。
实操建议：
- 不要尝试用
querySelectorAll(':hover')——语法合法但永远返回空数组，检测状态请用el.matches(':hover')单独判断 - 对 ARIA 属性，确保组件更新状态时调用
el.setAttribute('aria-expanded', 'true')，而不是只改el.ariaExpanded（后者是只读 property） - 需要匹配多个属性组合时，用逗号分隔选择器更高效：
document.querySelectorAll('[data-status="pending"], [data-status="failed"]')，比用:is()兼容性更好（IE 不支持:is）
真正麻烦的不是怎么写选择器，而是你得确认那个“特定属性”到底是写在 HTML 上的、还是运行时由 JS 注入的、又或者藏在 Shadow DOM 里——漏掉任一环节，querySelectorAll 返回的 NodeList 就是空的，而控制台不会报错，只会安静地什么也不做。
