blocks|key|438043|text|下面是一个检索评论的JQuery插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438044|http://www.bennadel.com/blog/1563-jQuery-Comments-Plug-in-To-Access-HTML-Comments-For-DOM-Templating.htm|offset|length|438045|基本思想是查看nodes，而不是elements|style|CODE|438046|http://www.w3schools.com/htmldom/dom_nodes.asp|438047|您从document对象开始，然后使用childNodes集合遍历它们。您必须检查node.nodeType+==+8，它将只返回注释节点(请注意，您需要递归地遍历子节点)。|438048|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|2W|0|0|7|5|G|8|0|0|1A|1|0|2|8|J|A|15|I|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@$D|11|E|12|H|I]|$D|13|E|14|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|L|3|M|5|6|7|19|8|@$D|1A|E|1B|H|I]|$D|1C|E|1D|H|I]|$D|1E|E|1F|H|I]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|C]]|U|$5|Q|R|S|A|$T|K]]]]

<p>Here is a JQuery plugin that retrieves the comments:</p>

<p><a href="http://www.bennadel.com/blog/1563-jQuery-Comments-Plug-in-To-Access-HTML-Comments-For-DOM-Templating.htm" rel="nofollow">http://www.bennadel.com/blog/1563-jQuery-Comments-Plug-in-To-Access-HTML-Comments-For-DOM-Templating.htm</a></p>

<p>The basic idea is to look at <code>nodes</code>, not <code>elements</code>:</p>

<p><a href="http://www.w3schools.com/htmldom/dom_nodes.asp" rel="nofollow">http://www.w3schools.com/htmldom/dom_nodes.asp</a></p>

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


blocks|key|219948|text|你必须遍历DOM才能得到它。注释DOM元素的nodeType是8|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|219949|if(+oNode.nodeType+===+8+)+{
++oNode.parentNode.removeChild(+oNode+);
}|code-block|syntax|javascript|219950|将是一种方法|219951|entityMap^0|M|8|V|1|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>You have to travers the DOM to get it.
The <code>nodeType</code> of the comment DOM element is <code>8</code></p>

<pre><code>if( oNode.nodeType === 8 ) {
  oNode.parentNode.removeChild( oNode );
}
</code></pre>

<p>would be an approach</p>


blocks|key|219978|text|使用NodeIterator+(IE+>=+9)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219979|最好的方法是使用一个专用的NodeIterator实例来迭代给定根元素中包含的所有注释。|offset|length|219980|See+it+in+action!|219981|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));
});|code-block|syntax|javascript|219982|使用定制的DOM遍历(也支持IE+<9)|219983|如果您必须支持较旧的浏览器(例如，IE+<9)，则需要自己遍历DOM并提取node+type为Node.COMMENT_NODE的元素。|style|CODE|219984|See+it+in+action!|219985|//+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%2B%2B)+{
++++if+(children[i].nodeType+==+Node.COMMENT_NODE)+{
++++++comments.push(children[i]);
++++}
++}
++return+comments;
}|219986|提取节点内容并将其删除|219987|与您从上面选择的方式无关，您将收到相同的节点DOM对象。|219988|访问评论内容就像访问commentObject.nodeValue一样简单。|219989|删除评论有点冗长：commentObject.parentNode.removeChild(commentObject)|219990|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/de/docs/Web/API/NodeIterator|1|http://jsfiddle.net/yjkmxmtt/3/|2|https://developer.mozilla.org/de/docs/Web/API/Node/nodeType|3|https://developer.mozilla.org/en-US/docs/Web/API/Comment|4|http://jsfiddle.net/7UXum/77/^0|0|D|C|0|0|0|H|1|0|0|0|1B|H|11|9|2|1B|H|3|0|0|H|4|0|0|0|0|A|N|0|9|1F|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1L|8|@]|9|@$D|1M|E|1N|1|1O]]|A|$]]|$1|F|3|G|5|6|7|1P|8|@]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|H|3|I|5|J|7|1T|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1U|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1V|8|@$D|1W|E|1X|Q|R]]|9|@$D|1Y|E|1Z|1|20]|$D|21|E|22|1|23]]|A|$]]|$1|S|3|T|5|6|7|24|8|@]|9|@$D|25|E|26|1|27]]|A|$]]|$1|U|3|V|5|J|7|28|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|29|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2A|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2B|8|@$D|2C|E|2D|Q|R]]|9|@]|A|$]]|$1|12|3|13|5|6|7|2E|8|@$D|2F|E|2G|Q|R]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|1D]]|1E|$5|17|18|19|A|$1A|1F]]|1G|$5|17|18|19|A|$1A|1H]]|1I|$5|17|18|19|A|$1A|1J]]]]

<h2>Using a NodeIterator (IE >= 9)</h2>

<p>The best method is to use a dedicated <a href="https://developer.mozilla.org/de/docs/Web/API/NodeIterator">NodeIterator</a> instance iterating all comments contained in a given root element.</p>

<p><a href="http://jsfiddle.net/yjkmxmtt/3/">See it in action!</a></p>

<pre><code>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));
});
</code></pre>

<h2>Using a custom-made DOM traversal (to support IE &lt; 9 as well)</h2>

<p>If you have to support older browsers (e.g. IE &lt;9), you need to traverse the DOM yourself and extract those elements whose <a href="https://developer.mozilla.org/de/docs/Web/API/Node/nodeType">node type</a> is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Comment"><code>Node.COMMENT_NODE</code></a>.</p>

<p><a href="http://jsfiddle.net/7UXum/77/">See it in action!</a></p>

<pre><code>// Thanks to Yoshi for the hint!
// Polyfill for IE &lt; 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&lt;len; i++) {
    if (children[i].nodeType == Node.COMMENT_NODE) {
      comments.push(children[i]);
    }
  }
  return comments;
}
</code></pre>

<h2>Extracting a node's contents and delete it</h2>

<p>Independent of the way you choose from above, you receive the same node DOM objects.</p>

<p>Accessing a comment's contents is as easy as <code>commentObject.nodeValue</code>.<br>
Deleting a comment is a bit more verbose: <code>commentObject.parentNode.removeChild(commentObject)</code></p>


blocks|key|438160|text|我需要为整个网页存储一个模板。但是-tag不能包含例如-tag。因此，我决定将我的模板存储在HTML-comment中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438161|我将HTML-comment放在一个隐藏中，以便更容易地检索特定HTML-comment中的文本，而不必费心将其与其他HTML-comment区分开来。|438162|下面的演示演示了如何使用createTreeWalker检索HTML-comment中的内容。|438163|​|438164|alert(
++document.createTreeWalker(
++++document.getElementById('commentDiv'),+
++++NodeFilter.SHOW_COMMENT,+
++++null,+
++++false
++).nextNode().nodeValue
);|code-block|syntax|javascript|438165|<p>Getting+the+text+in+a+HTML-comment.</p>
<p>I+use+createTreeWalker+to+make+sure+we+don't+simply+capture+an+empty+text+node+by+mistake.+You+could+make+the+code+even+simpler,+but+then+you+must+make+sure+that+the+&lt;div>-tag+is+immediately+followed+by+the+"&lt;!--",+like+this+"&lt;div>&lt;!--".+But+if+that+breaks+because+of+for+example+autoformating+in+an+editor,+so+that+you+get+a+line+feed+in+between+or+so,+then+the+simpler+method+will+fail.+That+is+why+I+prefere+to+use+the+createTreeWalker+here.</p>

<div+id="commentDiv"+style="display:none;">
++
</div>

<p>End+of+body.</p>|438166|438167|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>I needed to store a template for an entire web page. But the &lt;template&gt;-tag cannot contain for example an &lt;html&gt;-tag. So I decided to store my template inside an HTML-comment instead.</p>
<p>I put the HTML-comment in a hidden &lt;div&gt; in order to more easily retrieve the text in that specific HTML-comment, and not have to bother with distinguishing it from other HTML-comments.</p>
<p>Here is a demo of how you can retrieve what's inside a HTML-comment by using createTreeWalker.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>alert(
  document.createTreeWalker(
    document.getElementById('commentDiv'), 
    NodeFilter.SHOW_COMMENT, 
    null, 
    false
  ).nextNode().nodeValue
);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Getting the text in a HTML-comment.&lt;/p&gt;
&lt;p&gt;I use createTreeWalker to make sure we don't simply capture an empty text node by mistake. You could make the code even simpler, but then you must make sure that the &amp;lt;div&gt;-tag is immediately followed by the "&amp;lt;!--", like this "&amp;lt;div&gt;&amp;lt;!--". But if that breaks because of for example autoformating in an editor, so that you get a line feed in between or so, then the simpler method will fail. That is why I prefere to use the createTreeWalker here.&lt;/p&gt;
&lt;!--
  This is NOT the comment we want to get text from
--&gt;
&lt;div id="commentDiv" style="display:none;"&gt;
  &lt;!--
    This is THE text, and you can have anything in here
    &lt;&gt;
    &lt;div&gt;
    &lt;script&gt;alert('hello');&lt;/script&gt;
    etc.
    except of course an end of HTML-comment.

    An advantage of this way to store a template compared to using
    the &lt;template&gt;-tag, is that the &lt;template&gt;-tag can for example
    not contain a &lt;html&gt;-tag, in case you need to have a template
    for an entire web page.

    Check also my explanation down in the body text for why I use 
    createTreeWalker instead of some simpler code.
  --&gt;
&lt;/div&gt;
&lt;!--
  This is also NOT the comment we want to get text from
--&gt;
&lt;p&gt;End of body.&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>If I have that</p>

<pre><code>  &lt;!-- some comment --&gt;
</code></pre>

<p>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?</p>


How do I get an HTML comment with javascript

如果我有这个能力  如何获取此元素并使用javascript更改内容？如果我在其中有一段代码，并且我想删除注释标记，我该怎么做呢？

问如何使用javascript获取HTML注释
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用javascript获取HTML注释EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用javascript获取HTML注释
EN