Si je l'ai
<!-- some comment -->Comment puis-je obtenir cet élément et changer le contenu avec javascript ? Et si j'ai un code à l'intérieur de cet élément et que je veux supprimer la balise des commentaires, comment puis-je le faire ?
Réponses
Trop de publicités?
Utilisation d'un NodeIterator (IE >= 9)
La meilleure méthode consiste à utiliser un NodeIterator instance itérant tous les commentaires contenus dans un élément Root donné.
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));
});Utilisation d'un DOM traversal personnalisé (pour supporter également IE < 9)
Si vous devez supporter des navigateurs plus anciens (par exemple IE <9), vous devez traverser le DOM vous-même et extraire les éléments dont le type de nœud es Node.COMMENT_NODE .
// 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;
}Extraire le contenu d'un nœud et le supprimer
Indépendamment de la façon dont vous choisissez ci-dessus, vous recevez les mêmes objets DOM de nœud.
L'accès au contenu d'un commentaire est aussi simple que commentObject.nodeValue .
La suppression d'un commentaire est un peu plus verbeuse : commentObject.parentNode.removeChild(commentObject)
K..
Points
1095
Knaģis
Points
9927
Voici un plugin JQuery qui récupère les commentaires :
L'idée de base est d'examiner nodes pas elements :
http://www.w3schools.com/htmldom/dom_nodes.asp
Vous commencez par document et les parcourir en utilisant childNodes collection. Vous devez vérifier node.nodeType == 8 qui retournera uniquement les noeuds de commentaires (notez que vous devez itérer à travers les noeuds enfants de manière récursive).
Magnus
Points
81
J'avais besoin de stocker un modèle pour une page web entière. Mais la balise <template> ne peut pas contenir par exemple une balise <html>. J'ai donc décidé de stocker mon modèle à l'intérieur d'un commentaire HTML à la place.
J'ai placé le commentaire HTML dans une <div> cachée afin de pouvoir récupérer plus facilement le texte de ce commentaire HTML spécifique, sans avoir à se soucier de le distinguer des autres commentaires HTML.
Voici une démonstration de la façon dont vous pouvez récupérer le contenu d'un commentaire HTML en utilisant createTreeWalker.
alert(
document.createTreeWalker(
document.getElementById('commentDiv'),
NodeFilter.SHOW_COMMENT,
null,
false
).nextNode().nodeValue
);
<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 <div>-tag is immediately followed by the "<!--", like this "<div><!--". 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>
<!--
This is NOT the comment we want to get text from
-->
<div id="commentDiv" style="display:none;">
<!--
This is THE text, and you can have anything in here
<>
<div>
<script>alert('hello');</script>
etc.
except of course an end of HTML-comment.
An advantage of this way to store a template compared to using
the <template>-tag, is that the <template>-tag can for example
not contain a <html>-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.
-->
</div>
<!--
This is also NOT the comment we want to get text from
-->
<p>End of body.</p>
