HTML注释在DOM中不生成节点，浏览器解析时直接丢弃；仅JS创建的Comment节点才真实存在并可操作。
HTML 注释在 DOM 中根本不会被解析
浏览器加载 HTML 时，<!-- ... --> 这类注释会被解析器直接丢弃，不会生成任何 DOM 节点，也不会触发任何事件或样式计算。这不是“故障”，是规范行为。
常见错误现象：document.querySelector('comment') 报错、用 innerHTML 读取时看不到注释、想用 CSS 选中注释却完全无效。
- 注释不参与 DOM 树构建，所以
document.body.childNodes里可能有Comment节点，但纯 HTML 字符串里写进去的注释，在解析后就“消失”了（实际是被忽略） - 服务端模板（如 Django、Jinja）里写的注释，如果没被服务端处理掉，会原样发到前端——但浏览器依然只当它是注释，不渲染也不保留结构意义
-
innerHTML = '<!-- test --><div>ok</div>'后，document.body.innerHTML只返回<div>ok</div>，注释已不可见
想让注释“可见”或“可操作”，得用 JS 创建 Comment 节点
只有通过 JavaScript 显式创建的 Comment 节点，才会真实存在于 DOM 中，并能被查询、修改、移除。
使用场景：调试标记、临时占位、配合自定义解析逻辑（比如某些 DSL 工具扫描注释提取元数据）。
立即学习“前端免费学习笔记（深入）”；
- 正确方式：
const comment = document.createComment('debug: step2');+element.appendChild(comment) - 错误方式：直接在 HTML 源码里写
<!-- debug: step2 -->然后指望它出现在运行时 DOM 中供 JS 操作 - 注意
createComment()创建的是Node.COMMENT_NODE类型节点，不是字符串，不能用textContent直接改内容，要改nodeValue
服务端注释泄露导致前端异常？检查模板引擎配置
有些模板系统（如 EJS、Handlebars）默认保留注释，而另一些（如 Pug、Vue SFC）会剥离。若发现 HTML 源码里有大量注释，且页面行为异常（比如脚本执行顺序错乱），问题往往出在服务端。
典型表现：Uncaught SyntaxError: Unexpected token '<'，其实是注释被插进了 JS 字符串里；或者 JSON.parse() 失败，因为注释混在了 JSON 前后。
- EJS 默认保留
<!-- ... -->，但<%# ... %>是服务端注释，不会输出 - Vue 单文件组件中，
<!-- ... -->在 template 区域会被 Vue 编译器忽略，但在 script 或 style 区域属于 JS/CSS 注释，需按对应语言规则处理 - 检查响应头
Content-Type和实际返回内容是否一致，避免 HTML 注释意外进入 JSON 接口响应体
用正则匹配 HTML 注释？别在生产环境这么干
有人想用 /<!--[\s\S]*?-->/g 提取注释内容，这在简单字符串上看似可行，但极易出错。
性能与兼容性影响：正则无法处理嵌套注释（虽然 HTML 不允许嵌套）、CDN 自动压缩可能删掉注释、XSS 过滤器可能误杀含特殊字符的注释。
- HTML 注释语法允许破折号出现在内容中，只要不连续出现三个以上，比如
<!-- - - - -->是合法的，但很多正则会提前终止 - 更安全的做法是用浏览器原生解析：把 HTML 字符串塞进
document.createElement('template')，再遍历content.childNodes找Node.COMMENT_NODE - 如果必须用正则（如构建时预处理），至少加上
u标志并限制最大匹配长度，防止回溯爆炸
事情说清了就结束。真正难的不是“怎么写注释”，而是分清哪段注释归浏览器管、哪段归 JS 管、哪段压根不该出现在最终 HTML 里。
