动态生成的列表项节点必须已插入dom才能被查到，应确认元素真实挂载后，再用queryselectorall等方法精准查询，并注意异步渲染时机及shadow dom等特殊场景。
要查询所有动态生成的列表项节点（比如 <li>），关键在于：**节点必须已存在于 DOM 中，且查询时机要正确**。动态生成的元素如果还没被插入到页面，用常规选择器是查不到的。
确认元素已真实插入 DOM
很多问题其实出在“以为生成了，其实还没 append”：
- 用
document.createElement('li')创建后，必须调用parentElement.appendChild(li)或insertAdjacentElement等方法真正挂载到 DOM 树中 - 检查浏览器开发者工具的 Elements 面板，确认
<li>节点确实出现在目标<ul></ul>或<ol></ol>内部 - 如果用模板字符串拼接（如
ul.innerHTML += '<li>xxx</li>'），需注意这会重写整个 innerHTML，可能丢失事件监听器，但节点本身是存在的
使用标准选择器精确查找
一旦节点已挂载，就可放心用以下方式查询：
-
document.querySelectorAll('li')—— 获取页面中所有<li>（包括静态和动态） -
ul.querySelectorAll('li')—— 只查某个特定<ul></ul>下的<li>（推荐，更精准） -
document.querySelectorAll('ul.my-list li')—— 带类名限定，避免误匹配导航栏等其他列表 - 若动态项有特殊标识（如
data-dynamic="true"），可用document.querySelectorAll('li[data-dynamic]')
处理异步生成或延迟渲染场景
比如数据从接口加载后再渲染，或使用框架（React/Vue）的虚拟 DOM 渲染逻辑：
- 确保在渲染完成后的回调中执行查询（如
then()、useEffect的 effect cleanup 后，或MutationObserver） - 简单轮询（不推荐，仅调试用）：
setTimeout(() => console.log(document.querySelectorAll('li')), 100) - 监听 DOM 变化：
new MutationObserver监听目标容器的childList变化，触发后立即查询
避开常见陷阱
这些操作看似合理，但容易查不到节点：
- 在
createElement后立刻查document.querySelector('li')→ ❌ 还没插入 - 用
innerHTML替换时，原<li>被销毁，新节点需重新查询 → ✅ 换成insertAdjacentHTML('beforeend', '...')更安全 - 在 Shadow DOM 内动态生成？需在对应 shadowRoot 上调用
querySelectorAll，而非document - 框架中直接操作 DOM 可能被覆盖 → 优先用框架提供的 ref 或响应式机制获取节点
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
