访问 <html> 标签外的注释节点答案

【问题标题】：Access comment nodes outside <html> tag访问 <html> 标签外的注释节点
【发布时间】：2013-02-04 13:58:50
【问题描述】：

我正在开发一个 chrome 扩展程序，它从页面中读取 html cmets 并在操作弹出窗口中呈现它们。

但是，我不知道如何（以及是否可能）获取<html> 标记之前和之后的一些 cmets。例如：

<!-- test test test -->
<DOCTYPE html>
<html>
...
</html>

在 jQuery 中，$("html").before() 和 $("html").after() 都返回与 $("html") 相同的结果。

是否可以使用 jQuery 或纯 Javascript 获取这些类型的 cmets？

编辑：带有 cmets 的页面如下所示：

<!-- Comment I'd like to fetch -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" >
<head>
<title>Featured Designers for WOMEN</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

【问题讨论】：

我认为 HTML cmets 不会附加到 DOM 树中。
jQuery.before() 和 jQuery.after() 插入内容:)
没错，@jensgram！我的坏 =)

标签： javascript jquery html dom

【解决方案1】：

有了这份文件：

<!-- comment 1 -->
<!DOCTYPE html>
<!-- comment 2 -->
<html>
<body>
hello world
</body>
</html>

你会得到这样的第一条评论：

document.firstChild.nodeValue

发现第二条评论是这样的：

document.childNodes[2].nodeValue

获取document下面的所有cmets：

var nodes = document.childNodes;
for (var i = 0, len = nodes.length; i !== len; ++i) {
    if (nodes[i].nodeType === 8) {
        console.log('Found comment' + nodes[i].nodeValue);
    }
}

【讨论】：

嘿@Jack，要获得第二条评论，它可能有效。但 document.firstChild.nodeValue 返回 null（至少在 chrome 上）。
@fegemo 我实际上已经在 Chrome 上测试过了；但是我的答案的最后一部分应该可以工作。
@fegemo 它在小提琴中不起作用，因为小提琴会剥离 cmets。
@fegemo 我已经在一个空白页面上测试了您的确切 HTML，运行该 JavaScript 会将单个注释输出到控制台。
你是对的，@杰克。我不知道发生了什么，但它现在正在工作。很抱歉给您带来麻烦，感谢您的回复！

【解决方案2】：

document.firstChild 应该这样做。

【讨论】：

document.firstChild 正在返回 DOCTYPE 标签

【解决方案3】：

$("html").siblings(); 这将返回与我相信的 html 标记处于同一级别的所有 dom 对象元素。我想通过使用 JSfiddle 来确认，但我现在使用 IE8 在他们的网站上收到 Javascript 错误。如果它在您的测试中对您不起作用，我可以稍后回家确认。

【讨论】：

$("html").siblings() 返回一个空数组
html 是什么样子的？