Ist es möglich, Verweis auf Kommentar-element/block von JavaScript?
Das klingt ein wenig verrückt, aber ich Frage mich, ob möglich, Verweis auf Kommentar-element so, dass ich dynamisch ersetzen Sie es anderen, die Inhalte mit JavaScript.
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<!-- sidebar place holder: some id-->
</body>
</html>
In der oben genannten Seite, kann ich den Verweis auf die Kommentar-block und ersetzen Sie es mit etwas Inhalt in den lokalen Speicher?
Ich weiß, dass ich einen div-Platz-Halter. Frage mich, ob es gilt für Kommentar-block.
Danke.
- Es wäre viel einfacher und effizienter zu verwenden Sie eine eindeutige ID als Platzhalter. Wenn es nicht eine praktische element, wo Sie es brauchen, erstellen Sie eine leere
<div>
oder<span>
und weisen Sie Ihre ID mit, die. - Das problem mit
<div>
und<span>
ist, die Sie stören können, mit CSS-Selektoren und bis Ende Mai die Aufnahme sichtbaren Raum oder beeinflussen den Fluss von Inhalten etc. - meine Lösung war die Verwendung<script>
- tags verwenden, siehe meine Antwort unten.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Node.COMMENT_NODE
Konstanten, die Sie verwenden können, um test für Führung statt8
Scheint es legitim (performance) betrifft etwa Kommentare als Platzhalter - zum einen gibt es keine CSS-Auswahl, die sich mit Kommentar-Knoten, so dass Sie nicht in der Lage sein, Abfragen mit z.B.
document.querySelectorAll()
, das macht es schwierig und langsam zu lokalisieren Kommentar-Elemente.Meine Frage war dann, ist es ein weiteres element, das ich kann inline, dass keine sichtbaren Nebenwirkungen? Ich habe gesehen, wie einige Menschen mit der
<meta>
tag, aber ich sah, in, und mit, dass in<body>
ist nicht gültig markup.Also ließ ich mich auf die
<script>
tag.Verwenden Sie eine benutzerdefinierte
type
- Attribut, so dass es nicht tatsächlich ausgeführt, wie ein Skript, und verwenden Siedata-
- Attribute für die Initialisierung benötigten Daten durch das Skript gehen, zu initialisieren Platzhalter.Beispiel:
Dann einfach die Abfrage von tags, z.B.:
Dann ersetzen Sie Sie nach Bedarf - hier ist eine schlichte DOM-Beispiel.
Beachten Sie, dass
placeholder
in diesem Beispiel nicht definiert, die "echte" Sache - sollte man ersetzen z.B.vendor-name
um sicherzustellen, dass Ihrtype
nicht kollidieren mit etwas "real".Gebäude aus der hyperslug Antwort, Sie können machen, dass es schneller geht, indem Sie mit einem Stapel anstelle der Funktion, die die Rekursion. Wie in diesem jsPerf, Funktion Rekursion 42% langsamer auf meinem Chrome 36 auf Windows und 71% mit IE11 im IE8-Kompatibilitätsmodus. Es scheint zu laufen, etwa 20% langsamer in IE11 edge-Modus aber schneller in allen anderen Fällen getestet.
Oder wie in Maschinenschrift:
Wenn Sie jQuery verwenden, können Sie Folgendes tun, um alle Kommentar-Knoten
Wenn Sie möchten, dass nur die Kommentare, die Knoten des Körpers, verwenden Sie
Wenn Sie möchten, dass die Kommentar-strings als array können Sie dann verwenden
map
:Gibt es eine API für die Dokument-nodes-traversal:
Document#createNodeIterator()
:JS:
CSS:
HTML:
Bearbeiten: verwenden Sie ein NodeIterator statt einer TreeWalker
Dies ist eine alte Frage, aber hier ist meine zwei Cent auf DOM "Platzhalter"
IMO ein comment-element ist perfekt für den job (gültig html, nicht sichtbar ist, und in keinster Weise irreführend sind).
Allerdings Durchlaufen der dom auf der Suche für Kommentare ist nicht erforderlich, wenn Sie bauen Ihre code-die andere Weise herum.
Ich würde empfehlen die Verwendung der folgenden Methode:
Markieren Sie die Orte, die Sie wollen, zu "kontrollieren", die mit markup-Code Ihrer Wahl ein (e.g ein div-element mit einer bestimmten Klasse)
Finden die Platzhalter der üblichen Weise (querySelector/classSelector etc)
var placeholders = document.querySelectorAll('placeholder');
var refArray = [];
[...placeholders].forEach(function(placeholder){
var comment = document.createComment('this is a placeholder');
refArray.push( placeholder.parentNode.replaceChild(comment, placeholder) );
});
in dieser Phase Ihre gerenderte markup sollte so Aussehen:
ersetzen Sie den zweiten Kommentar mit der überschrift
let headline = document.createElement('h1');
headline.innerText = "I am a headline!";
refArray[1].parentNode.replaceChild(headline,refArray[1]);