如何使用javascript获取HTML评论

时间:2012-11-13 15:49:09

标签: javascript html

如果我有那个

  <!-- some comment -->

如何获取此元素并使用javascript更改内容? 如果我有一个代码,我想删除评论标记,我该怎么办?

4 个答案:

答案 0 :(得分:27)

使用NodeIterator(IE&gt; = 9)

最好的方法是使用专用的NodeIterator实例迭代给定根元素中包含的所有注释。

See it in action!

function filterNone() {
    return NodeFilter.FILTER_ACCEPT;
}

function getAllComments(rootElem) {
    var comments = [];
    // Fourth argument, which is actually obsolete according to the DOM4 standard, is required in IE 11
    var iterator = document.createNodeIterator(rootElem, NodeFilter.SHOW_COMMENT, filterNone, false);
    var curNode;
    while (curNode = iterator.nextNode()) {
        comments.push(curNode.nodeValue);
    }
    return comments;
}

window.addEventListener("load", function() {
    console.log(getAllComments(document.body));
});

使用定制的DOM遍历(以支持IE&lt; 9)

如果您必须支持较旧的浏览器(例如IE&lt; 9),您需要自己遍历DOM并提取node typeNode.COMMENT_NODE的元素。

See it in action!

// Thanks to Yoshi for the hint!
// Polyfill for IE < 9
if (!Node) {
    var Node = {};
}
if (!Node.COMMENT_NODE) {
    // numeric value according to the DOM spec
    Node.COMMENT_NODE = 8;
}

function getComments(elem) {
  var children = elem.childNodes;
  var comments = [];

  for (var i=0, len=children.length; i<len; i++) {
    if (children[i].nodeType == Node.COMMENT_NODE) {
      comments.push(children[i]);
    }
  }
  return comments;
}

提取节点的内容并将其删除

独立于您从上面选择的方式,您将收到相同的节点DOM对象。

访问评论的内容就像commentObject.nodeValue一样简单 删除评论有点冗长:commentObject.parentNode.removeChild(commentObject)

答案 1 :(得分:4)

你必须遍历DOM才能获得它。 注释DOM元素的nodeType8

if( oNode.nodeType === 8 ) {
  oNode.parentNode.removeChild( oNode );
}

将是一种方法

答案 2 :(得分:0)

这是一个检索评论的JQuery插件:

http://www.bennadel.com/blog/1563-jQuery-Comments-Plug-in-To-Access-HTML-Comments-For-DOM-Templating.htm

基本想法是查看nodes,而不是elements

http://www.w3schools.com/htmldom/dom_nodes.asp

您从document对象开始,并使用childNodes集合迭代它们。您必须检查node.nodeType == 8,它将仅返回注释节点(请注意,您需要递归迭代子节点)。

答案 3 :(得分:0)

我需要存储整个网页的模板。但是