为什么 outerHTML 会带回 <!-​- --> 评论？

Question

我在这里有一个 jsfiddle - http://jsfiddle.net/stevea/QpNbu/3/ - 收集所有具有 class='active' 的元素的 outerHTML。让我吃惊的是，即使我注释掉了一些 HTML，如：

<!--      <div>'Some inner text'</div>  -->

outerHTML 还是把它带回来了！这不能仍然在 DOM 中，所以我想知道 outerHTML 在哪里寻找。

感谢您的任何见解。

Answer 1

HTML 中的注释出人意料地，实际上是 DOM 的一部分！如果您在此处查看此屏幕截图：

您会看到 google chrome 网络检查器将其呈现为 DOM 的一部分（请注意底部栏如何将其显示为 div#box1.active 的子项。）

对于更具体的文档，如果您查看可能的 DOM 节点 on MDN 的 Node.nodeTypes，您会发现 COMMENT_NODE 是有效类型之一。

COMMENT_NODE 8

W3 还为 DOM 定义了 Comment 接口：

该接口继承自CharacterData，表示评论的内容，即开头''之间的所有字符。请注意，这是 XML 中的注释定义，实际上是 HTML，尽管一些 HTML 工具可能实现完整的 SGML 注释结构。

Answer 2

HTML cmets 是 DOM 的一部分，它们只是被浏览器忽略以显示。