Question

我有一个带有调试注释的文档，如下所示：

<!--SERVER_TRACE {...}-->

有没有办法查询DOM以访问此节点？我正在寻找一个vanilla JavaScript解决方案，没有任何库的帮助。

我的第一个想法是深度搜索DOM，并根据评论的节点类型值比较找到的节点Node.COMMENT_NODE。有更简单的方法吗？

Answer 1

有TreeWalker个API：

var tw = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT, null, null),
    comment;
while (comment = tw.nextNode()) {
    // ...
}

IE8及更低版本不支持此功能。

T.J。在评论中提供了link to the specs。我总是只使用TreeWalkers，但在你的情况下，NodeIterator也很好。

Answer 2

nodeType核心属性允许您区分节点类型。在这种特殊情况下，8代表评论。因为他们没有选择器，你需要循环他们的父母来获取它们（这很糟糕，我知道）。以下代码将为您筛选出来：

$("*").contents().filter(function(){
    return this.nodeType == Node.COMMENT_NODE;
})

我自己的jQuery-less版本，因为有些人没有它：

function getAllComments() {
    var t = [],
        recurse = function (elem) {
            if (elem.nodeType == Node.COMMENT_NODE) {
                t.push(elem);
            };
            if (elem.childNodes && elem.childNodes.length) {
                for (var i = 0; i < elem.childNodes.length; i++) {
                    recurse(elem.childNodes[i]);
                };
            };
        };
    recurse(document.getElementsByTagName("html")[0]);
    return t;
};

如果您要搜索特定节点，请将document.getElementsByTagName调用重新绑定到您选择的变量。

修改：fiddle以演示Jason Sperske完成的使用！

是否有用于查询注释节点的DOM API？

2 个答案: