用queryselector获取p的直接子元素需用子选择器“>”，如document.queryselector('p > span')；后代选择器'p span'会匹配任意嵌套深度的span。

用 querySelector 获取 p 标签里的直接子元素

如果只想选 p 下面**第一层**的子元素（比如 span 或 strong），必须用子选择器 >，否则默认是后代选择器，会穿透多层：

document.querySelector('p > span')

常见错误是写成 document.querySelector('p span')——这会匹配 p 内任意深度的 span，包括嵌套在 div 或 em 里的，不是“直接子元素”。

注意：只有元素节点算子元素，文本节点、注释节点不参与选择。

用 querySelectorAll 批量获取所有嵌套结构中的特定标签

要拿 p 里所有 a 标签（不管嵌套几层），就用后代选择器：

document.querySelectorAll('p a')

返回的是 NodeList，可遍历处理。但要注意：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 若页面有多个 p，这个选择器会跨 p 匹配——比如第二个 p 里的 a 也会被选中
• 如果只想限定在某个具体 p 内部，先拿到该 p 元素，再调用它的 querySelectorAll 方法：

  const p = document.querySelector('#intro');<br>p.querySelectorAll('a')

• querySelectorAll('p a') 不等价于 querySelectorAll('a') 的过滤版——前者只找在 p 内的 a，后者是全局找，再手动判断父级，性能差且易错

用 :scope 避免重复写父选择器

当已有一个 p 元素对象，想在其内部查更深层结构（比如所有带 data-id 的子元素），用 :scope 最干净：

const p = document.querySelector('p');<br>p.querySelectorAll(':scope [data-id]')

这里 :scope 指的就是这个 p 元素本身，不会向上或跨兄弟查找。相比 p.querySelectorAll('[data-id]')，它能正确处理属性选择器在嵌套中的作用域，尤其在动态插入内容后更可靠。

注意：:scope 在旧版 Safari 和 IE 中不支持，如需兼容得降级为手动遍历或加 polyfill。

别忽略 HTML 结构对选择器生效的影响

看似简单的 p em 可能根本选不到东西，原因常是：

• p 里实际没 em，而是用了 i 或 CSS 样式模拟斜体
• 内容由 JS 动态渲染，DOM 查询过早，节点还没挂载
• 某些富文本编辑器（如 TinyMCE）把内容塞进 shadow DOM 或 iframe，主文档的 querySelector 默认查不到
• p 被 CSS 设置了 display: none 或 visibility: hidden，不影响选择器匹配，但容易让人误判“没选中”

最稳妥的做法：先确认目标结构真实存在，再用浏览器开发者工具的 Elements 面板右键「Reveal in Elements panel」，看是否真在 p 下面，且没被框架隔离。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！