如何使用javascript获取HTML评论

If I have that

如果我有

  <!-- some comment -->

How do I get this element and change the content with javascript? And if I have a code inside that and I want to delete the tag of comments how can I do it?

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

3 个解决方案

#1

Using a NodeIterator (IE >= 9)

The best method is to use a dedicated NodeIterator instance iterating all comments contained in a given root element.

最好的方法是使用专用的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));
});

Using a custom-made DOM traversal (to support IE < 9 as well)

If you have to support older browsers (e.g. IE <9), you need to traverse the DOM yourself and extract those elements whose node type is Node.COMMENT_NODE.

如果必须支持旧浏览器（例如IE <9），则需要自己遍历DOM并提取节点类型为Node.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;
}

Extracting a node's contents and delete it

Independent of the way you choose from above, you receive the same node DOM objects.

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

Accessing a comment's contents is as easy as commentObject.nodeValue.
Deleting a comment is a bit more verbose: commentObject.parentNode.removeChild(commentObject)

访问注释的内容就像commentObject.nodeValue一样简单。删除注释有点冗长：commentObject.parentNode.removeChild（commentObject）

#2

You have to travers the DOM to get it. The nodeType of the comment DOM element is 8

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

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

would be an approach

会是一种方法

#3

Here is a JQuery plugin that retrieves the comments:

这是一个检索注释的JQuery插件：

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

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

The basic idea is to look at nodes, not elements:

基本思想是查看节点，而不是元素：

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

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

You start with document object, and iterate through them using childNodes collection. You have to check for node.nodeType == 8 which will return just the comment nodes (note that you need to iterate through child nodes recursively).

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