In diesem Artikel wird ein gelöschter Div-Knoten erstellt: Ссылка
Ich verstehe nicht: Ich dachte, dass DOM alle Knoten besitzt. Wie würdest du DOM dann anhängen?
Last but not least, was wäre der Zweck, einen gelösten Knoten zu haben?
Ich bin nicht sicher, welche Antwort Sie erwarten, also hier sind einige Gedanken:
Ich dachte, dass DOM alle Knoten besitzt.
Das Dokument besitzt jeden Knoten. Jeder Knoten hat ein ownerDocument
[MDN] Eigenschaft.
Aus der Spezifikation :
Die
Document
-Schnittstelle repräsentiert das gesamte HTML- oder XML-Dokument. Konzeptionell ist es der Stamm der Dokumentstruktur und bietet den primären Zugriff auf die Daten des Dokuments.Da Elemente, Textknoten, Kommentare, Verarbeitungsanweisungen usw. nicht außerhalb des Kontexts von
Document
existieren können, enthält die SchnittstelleDocument
auch die Factory-Methoden, die zum Erstellen dieser Objekte erforderlich sind. Die erstelltenNode
-Objekte haben einownerDocument
-Attribut, das sie mit demDocument
assoziiert, in dessen Kontext sie erstellt wurden.
Wie würdest du DOM dann anhängen?
Es gibt verschiedene Möglichkeiten, einen neuen Knoten einzufügen, z. B. appendChild
[docs
Last but not least, was wäre der Zweck, einen gelösten Knoten zu haben?
Ein Vorteil ist, dass Sie komplexe Teilbäume offline erstellen können, so dass der Browser das Layout nicht jedes Mal neu berechnen muss, wenn Sie einen Knoten einfügen.
Manchmal ist es auch nützlich, um eine HTML-Zeichenfolge zu analysieren. Indem Sie eine leere, getrennte insertBefore
erstellen und die HTML-Zeichenfolge div
zuweisen, können Sie die HTML-Zeichenfolge problemlos analysieren und verarbeiten.
Die einzige Einschränkung ist, dass innerHTML
keine Knoten finden kann, die nicht Teil des Baumes sind.
Interessant ist in diesem Zusammenhang auch die Erklärung der Eigenschaft document.getElementById
. Schließlich ist ein Node.parentNode
ohne Eltern nicht Teil des Baumes:
Das übergeordnete Element dieses Knotens. Alle Knoten, mit Ausnahme von
Node
,Attr
,Document
,DocumentFragment
undEntity
, können eine übergeordnete Komponente haben. Wenn jedoch ein Knoten gerade erstellt und noch nicht zur Struktur hinzugefügt wurde oder wenn er aus der Struktur entfernt wurde, ist diesNotation
.
Mit document.createElement()
können Sie ein erstellen Elementknoten
An dieser Stelle wird es zwar im Speicher vorhanden sein, aber nicht an das DOM angehängt worden sein.
Es gibt zahlreiche Möglichkeiten, wie ein Knoten an das DOM angehängt werden kann, aber wahrscheinlich am einfachsten wäre element.appendChild(node)
Vielleicht möchten Sie zuerst das Element erstellen, es bearbeiten und dann an das DOM anhängen, damit Ihre Manipulationen nicht zu Browser Reflow zB Wenn Sie Hintergrundfarbe, Rahmen, anhängende untergeordnete Elemente usw. festlegen, möchten Sie dies im Speicher vornehmen, ohne dass jede Änderung als visuelle Änderung im Browser angezeigt werden muss.
Das Ändern des DOM ist teuer. Sie können ein losgelöstes Objekt erstellen und es so einrichten, wie Sie es benötigen (indem Sie seine Attribute hinzufügen, Bindung Event-Handler , usw.). Nach der Einrichtung, wie Sie wollen, dann fügen Sie es an das DOM an.
Die Seite, mit der Sie verbunden sind, verwendet .empty()
, wodurch Elemente aus dem DOM entfernt werden und alle Ereignishandler aus diesen Elementen entfernt.
Es gibt auch .detach()
, was du vielleicht meinst. .detach()
vereinfacht im Grunde genommen den Knoten vom DOM. Es ist nicht mehr Teil des DOMs. es hängt einfach im Speicher herum (solange man es in einer Variablen hält). Das bedeutet, dass Sie den gelöschten Knoten für immer verloren haben, wenn Sie die Variable verwerfen (weder im DOM noch in einer Variablen).
Ein Anwendungsfall ist z.B. "Entfernen" eines Elements vorübergehend aus dem DOM, ohne es tatsächlich zu verwerfen, sodass Sie es später anhängen können (mit .append
/ .after
/ etc).
Tags und Links javascript jquery dom