Est-il possible d'obtenir une référence à l'élément de commentaire/bloquer par JavaScript?

Cela semble un peu fou, mais je me demandais si possible pour obtenir une référence à l'élément de commentaire afin que je puisse remplacer dynamiquement il d'autres contenus avec JavaScript.

<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<!-- sidebar place holder: some id-->
</body>
</html>

Au-dessus de la page, puis-je obtenir une référence au bloc de commentaire et de le remplacer avec un peu de contenu dans le local de stockage?

Je sais que je peux avoir un div place de titulaire. Je me demandais si elle s'applique à bloc de commentaire.
Merci.

Il serait beaucoup plus facile et plus efficace, à utiliser un ID unique à un espace réservé. Si ce n'est pas une pratique où vous en avez besoin, de créer un vide <div> ou <span> et affecter votre IDENTIFIANT.
Le problème avec <div> et <span>, c'est qu'ils peuvent interférer avec les sélecteurs CSS et peut prendre jusqu'visible de l'espace ou qui affectent le flux de contenu, etc - ma solution a été d'utiliser <script> balises au lieu de cela, voir ma réponse ci-dessous.

InformationsquelleAutor Morgan Cheng | 2011-05-17

var findComments = function(el) {
    var arr = [];
    for(var i = 0; i < el.childNodes.length; i++) {
        var node = el.childNodes[i];
        if(node.nodeType === 8) {
            arr.push(node);
        } else {
            arr.push.apply(arr, findComments(node));
        }
    }
    return arr;
};

var commentNodes = findComments(document);

//whatever you were going to do with the comment...
console.log(commentNodes[0].nodeValue);

Merci. Mais la traversée de l'arborescence DOM doit coûter beaucoup. Donc, nous ferions mieux de ne pas utiliser les commentaires comme place de titulaire.
Il y a un Node.COMMENT_NODE constante que vous pouvez utiliser pour tester des commentar au lieu de 8
Nœud.COMMENT_NODE n'est pas défini dans ie8. Si c'est une cible pour vous, gardez le numéro 8.

InformationsquelleAutor hyperslug

12

Il semble légitime (performance) des préoccupations au sujet de l'utilisation de commentaires comme des espaces réservés pour l'un, il n'y a pas de sélecteur CSS qui peuvent correspondre à des nœuds de commentaires, de sorte que vous ne serez pas en mesure de les interroger avec, par exemple,document.querySelectorAll(), ce qui le rend à la fois complexe et lente pour localiser commentaire éléments.

Ma question était, est-il un autre élément que je puisse passer à la volée, qui n'ont pas visible effets secondaires? J'ai vu des personnes à l'aide de la <meta> tag, mais j'ai regardé un peu, et l'utilisation qui en <body> n'est pas valide balisage.

Alors je me suis rabattue sur le <script> tag.

Utiliser un type attribut, donc il n'est pas exécuté comme un script, et l'utilisation data-attributs pour toutes les données d'initialisation requis par le script qui va initialiser vos espaces réservés.

Par exemple:
```
<script type="placeholder/foo" data-stuff="whatevs"></script>
```
Alors simplement interroger ces balises - par exemple:
```
document.querySelectorAll('script[type="placeholder/foo"]')
```
Puis de les remplacer en cas de besoin - voici un simple exemple DOM.

Noter que placeholder dans cet exemple n'est pas un "vrai" chose - vous devez remplacer qu'avec, par exemple, vendor-name à assurez-vous que votre type ne pas entrer en collision avec quelque chose de "réel".

InformationsquelleAutor mindplay.dk

Construction de hyperslug réponse, vous pouvez le faire aller plus vite en utilisant une pile à la place de la fonction de la récursivité. Comme le montre cette jsPerf, fonction de la récursivité est 42% plus lent sur mon google Chrome 36 sur Windows et 71% avec IE11 en mode de compatibilité IE8. Il semble courir environ 20% plus lent dans IE11 en mode edge, mais plus rapide dans tous les autres cas testés.

function getComments(context) {
    var foundComments = [];
    var elementPath = [context];
    while (elementPath.length > 0) {
        var el = elementPath.pop();
        for (var i = 0; i < el.childNodes.length; i++) {
            var node = el.childNodes[i];
            if (node.nodeType === Node.COMMENT_NODE) {
                foundComments.push(node);
            } else {
                elementPath.push(node);
            }
        }
    }

    return foundComments;
}

Ou comme le fait le Tapuscrit:

public static getComments(context: any): Comment[] {
    var foundComments = [];
    var elementPath = [context];
    while (elementPath.length > 0) {
        var el = elementPath.pop();
        for (var i = 0; i < el.childNodes.length; i++) {
            var node = el.childNodes[i];
            if (node.nodeType === Node.COMMENT_NODE) {
                foundComments.push(node);
            } else {
                elementPath.push(node);
            }
        }
    }

    return foundComments;
}

InformationsquelleAutor Joseph Lennox

4

Si vous utilisez jQuery, vous pouvez effectuer les opérations suivantes pour obtenir tous les nœuds de commentaires
```
comments = $('*').contents().filter(function(){ return this.nodeType===8; })
```
Si vous voulez seulement les commentaires des nœuds de l'organisme, utiliser
```
comments = $('body').find('*').contents().filter(function(){
     return this.nodeType===8;
 })
```
Si vous souhaitez que le commentaire de chaînes comme un tableau que vous pouvez ensuite utiliser map:
```
comment_strings = comments.map(function(){return this.nodeValue;})
```
InformationsquelleAutor Michael_Scharf

Il existe une API pour le document de nœuds de la traversée: Document#createNodeIterator():

JS:

var nodeIterator = document.createNodeIterator(
    document.body,
    NodeFilter.SHOW_COMMENT,    
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }
);

//Replace all comment nodes with a div
while(nodeIterator.nextNode()){
    var commentNode = nodeIterator.referenceNode;
    var id = (commentNode.textContent.split(":")[1] || "").trim();
    var div = document.createElement("div");
    div.id = id;
    commentNode.parentNode.replaceChild(div, commentNode);
}

CSS:

#header,
#content,
#some_id{
  margin: 1em 0;
  padding: 0.2em;
  border: 2px grey solid;
}

#header::after,
#content::after,
#some_id::after{
  content: "DIV with ID=" attr(id);
}

HTML:

<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<!-- sidebar place holder: some_id -->
</body>
</html>

Edit: utiliser un NodeIterator au lieu d'un TreeWalker

Vous ne savez pas pourquoi vous avez changé d'utiliser NodeIterator sur TreeWalker puisque la différence est minime et il n'existe si les nœuds de déplacer
très intéressant!!! Je ne connais pas ces API existent.
NodeIterators sont plus de nœud orienté vs TreeWalkers sont plus de la hiérarchie orientée. Voir Modèle d'Objet de Document de la Traversée. NodeIterator est plus adapté pour cette tâche Il n'y a pas d'API différence (pour la lecture en boucle sur les nœuds du haut vers le bas), peut-être mieux performer?
pourquoi ce n'est pas la accepté de répondre?

InformationsquelleAutor mems

0

C'est une vieille question, mais voici mes deux cents sur les DOM "espaces réservés"
IMO un élément de commentaire est parfait pour le travail (html valide, n'est pas visible, et de ne pas induire en erreur en quelque sorte).
Cependant, en traversant les dom à la recherche de commentaires n'est pas nécessaire si vous générez votre code dans l'autre sens.

Je vous suggérons d'utiliser la méthode suivante:
1. Marquer les lieux que vous voulez "contrôle" avec le balisage de votre choix (à l'e.g un élément div avec une classe spécifique)
```
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
```
2. Trouver les espaces réservés à la manière habituelle (querySelector/classSelector etc)
var placeholders = document.querySelectorAll('placeholder');
1. De les remplacer par des commentaires et de garder des références de ces commentaires:
var refArray = [];

[...placeholders].forEach(function(placeholder){ var comment = document.createComment('this is a placeholder'); refArray.push( placeholder.parentNode.replaceChild(comment, placeholder) ); });

à ce stade, votre rendu de balisage devrait ressembler à ceci:
```





```
1. Maintenant, vous pouvez accéder à chacun de ces commentaires directement avec votre bâti refArray et ne whatevere c'est que vous voulez... par exemple:
remplacer le deuxième commentaire avec un titre

let headline = document.createElement('h1'); headline.innerText = "I am a headline!"; refArray[1].parentNode.replaceChild(headline,refArray[1]);

InformationsquelleAutor Yair Levy

Vous devez vous connecter pour publier un commentaire.