Wie kann ein DIV-Knoten "gelöst" werden und was nutzt er?

8

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?

    
user310291 01.01.2012, 17:33
quelle

5 Antworten

10

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 Schnittstelle Document auch die Factory-Methoden, die zum Erstellen dieser Objekte erforderlich sind. Die erstellten Node -Objekte haben ein ownerDocument -Attribut, das sie mit dem Document 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 und Entity , 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 dies Notation .

    
Felix Kling 01.01.2012, 17:42
quelle
5

Mit document.createElement() können Sie ein erstellen Elementknoten

%Vor%

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)

%Vor%

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.

    
Russ Cam 01.01.2012 17:43
quelle
1

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.

    
Ayman Safadi 01.01.2012 17:42
quelle
1

Sie können definitiv Elemente erstellen, die nicht Teil des DOM sind.

%Vor%

Das Ausführen von Operationen an losgelösten Elementen ist weitaus effizienter als das Ausführen von Operationen für angefügte Elemente, da gelöste Elemente nicht gerendert werden müssen.

    
Kevin B 01.01.2012 17:42
quelle
1

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).

%Vor%     
pimvdb 01.01.2012 17:43
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie zeige ich einen Alarmdialog nur beim ersten Start meiner Anwendung an?