Detaillierte Einführung in das DOM-Wissen

DOM

Wir wissen, dass JavaScript aus ECMAScript + DOM + BOM besteht. ECMAScript ist eine Syntax in JS, und BOM ist hauptsächlich eine Sammlung verwandter Kenntnisse über das Browserobjekt (Fensterobjekt). Das DOM ist eine Wissenssammlung zu Dokumentobjekten.

Wir wissen, dass die Interaktion zwischen HTML und JS durch Ereignisse erreicht wird. Das DOM ist eine API für HTML-Dokumente (XML). Wenn wir also mit dem Benutzer interagieren möchten, müssen wir die vom DOM bereitgestellte API verwenden, um das HTML-Element abzurufen, und dann das entsprechende Ereignis an das Element binden, um mit dem Benutzer zu interagieren. Daher ist es sehr wichtig, DOM zu verstehen und zu beherrschen.

Dieser Artikel basiert hauptsächlich auf den DOM-bezogenen Kapiteln in „JavaScript Advanced Programming (3)“, um das Hauptwissen über DOM zu ordnen und einige meiner persönlichen Kenntnisse einzubringen.

Knotenebene

Jeder, der HTML-Code geschrieben hat, sollte wissen, dass wir jedem Element einen Einzug hinzufügen, dann die relevanten HTML-Tags und Inhalte schreiben und ihn schließlich auf der Webseite anzeigen müssen. Dieser verschachtelte HTML-Code und Inhalt bildet also die Knotenhierarchie.

Jeder, der ECMAScript versteht, sollte wissen, dass jedes Objekt in JS auf der Grundlage eines Referenztyps erstellt wird und der Referenztyp der von JS nativ bereitgestellte Referenztyp sein kann (Array, Funktion, RegExp, Objekt usw.). oder es kann sich um einen benutzerdefinierten Referenztyp handeln (der Referenztyp wird über das Schlüsselwort new aufgerufen (er kann auch als Konstruktor bezeichnet werden)). Alle Objekte sind Instanzobjekte von Object und können die Eigenschaften und Methoden von Object.prototype erben.

Und im DOM gibt es auch einen ähnlichen Mechanismus. Im DOM ist der Typ der obersten Ebene Knotentyp , und alle anderen Knoten können die Eigenschaften und Methoden unter dem Knotentyp erben. Der Node-Typ entspricht tatsächlich dem Object-Konstruktor in JS.

In diesem Fall werfen wir einen Blick auf die Eigenschaften und Methoden unter dem Knotentyp

Knotentyp

• Attribute (in a bestimmte spezifische Knoten rufen die folgenden Eigenschaften durch Vererbung auf)

• nodeType

• nodeName

• nodeValue

• ··············

• childNodes (Zeiger, der auf die NodeList zeigt Objekt)

• parentNodes

• nextSibling

• previousSibling

• firstChild

• lastChild

• ownDocument (jeder Knoten kann nur zu einem Document-Knoten gehören)

• Methode (rufen Sie die folgende Methode durch Vererbung auf einem bestimmten Knoten auf)

• ··· Knoten finden·· ·

• Die Methode zum Suchen von Elementen befindet sich im Dokumenttyp

• ················ ········

• ··· Knoten einfügen···

• appendChild(ele)

• insertBefore(ele, target)

• ·······················

• ··· Knoten löschen···

• removeChild(ele)

• ··· ·· ···················

• ··· Knoten ersetzen···

• replaceChild(ele, target)

• ························

• ··· Knoten kopieren···

• cloneNode(boolean) true: bedeutet tiefe Kopie, false: bedeutet flache Kopie

• ························

• ··· Dokumentknoten verarbeiten··· Selten verwendet ~

• normalize()

Es gibt nur eine begrenzte Anzahl von Eigenschaften und Methoden für den Node-Typ. Nochmals: alle Sie Andere Knoten können die Eigenschaften und Methoden des Knotentyps erben

Dokumenttyp

JS repräsentiert Dokumente über den Dokumenttyp. Das Dokumentobjekt ist eine Instanz von HTMLDocument und repräsentiert die gesamte HTML-Seite. Gleichzeitig ist das Dokumentobjekt auch eine Eigenschaft unter dem Fensterobjekt, sodass auf es als globales Objekt zugegriffen werden kann.

• Attribute

• document.documentElement (stellt das HTML-Element dar), und das HTML-Element kann über document.childNodes[1 abgerufen werden ]

• document.body (repräsentiert das Körperelement)

• document.head (repräsentiert das Kopfelement)

• document.compatMode (gibt an, welche Rendering-Methode der Browser verwendet, „CSS1Compat“ bedeutet Standardmodus, „BackCompat“ bedeutet gemischter Modus)

• document.charset (gibt den tatsächlichen an Wird im Zeichensatz des Dokuments verwendet und kann auch zum Angeben eines neuen Zeichensatzes verwendet werden 🎜>

• document.docType (stellt das Element dar), es gibt Probleme mit der Browserkompatibilität

• document.title (stellt das Element < title > dar)

• ···Webseitenanforderung···

• document.URL (URL-Adresse abrufen)

• document.domain (URL-Domänennamen in abrufen, Pfadname)

• document.attributes (rufen Sie die Attribute eines Knotens ab und geben Sie ein NamedNodeMap-Objekt zurück, ähnlich wie NodeList)

• Methode

• ··· Finden Sie das Element···

• document.getElementById(id) Geben Sie das Element zurück

• document.getElementsByTagName(classname) gibt ein HTMLCollection-Objekt zurück, das null oder mehr Elemente enthält, ähnlich einem NodeList-Objekt

• document.getElementsByName(ele) gibt ein Element mit einem bestimmten Namensattribut zurück, Gibt außerdem das HTMLCollection-Objekt zurück

• document.getElementsByClassName(className) gibt alle passenden NodeList-Objekte zurück (Diese Methode kann für Dokumenttyp und Elementtyp aufgerufen werden)

• document.querySelector(selector)-Selektor bedeutet, dass der CSS-Selektor das erste Element zurückgibt, das dem Muster entspricht. Wenn es nicht gefunden wird, wird null zurückgegeben (Dokumenttyp, DocumentFragment-Typ, Elementtyp sind alle Sie kann diese Methode aufrufen )

• document.querySelectorAll(selector) Selector zeigt an, dass der CSS-Selektor ein erfolgreich passendes NodeList-Objekt zurückgibt (Dokumenttyp, DocumentFragment-Typ, Elementtyp Diese Methode kann aufgerufen werden )

• ··· Elemente erstellen···

• document.createElement() (erstellt Das Element befindet sich in einem freien Zustand und muss über appendChild eingefügt werden)

• ··· Textknoten erstellen···

• document.createTextNode( ) (Gute Elemente erstellen sind in einem freien Zustand und müssen über appendChild eingefügt werden)

• ··· Bestimmen Sie die Elementgröße···

• document.getBoundingClientRect()

Elementtyp

• Attribute

• id

• title

• lang

• className

• Methode

• getAttribute(ele) Holen Sie sich ein Attribut

• setAttribute(name, value) Legen Sie ein fest attribute

• removeAttribute(ele) entfernt ein Attribut

• getElementsByTagName(ele) ruft das Element mit dem Tag-Namen ele

ab

Texttyp

• Attribute

• nodeValue data (Zugriff auf den Text im Textknoten). )

DocumentFragment-Typ

Zweck: Offline-Betrieb von DOM-Elementen, um eine massive Neuanordnung und Neuzeichnung von DOM-Knoten zu vermeiden, was zu Leistungsproblemen führt

• Methode

• document.createDocumentFragment() (zeigt das Erstellen eines Dokumentfragments an)

NodeList Objekt

NodeList und seine „nahen Verwandten“ NamedNodeMap und HTMLCollection zu verstehen, ist der Schlüssel zu einem gründlichen Verständnis des DOM als Ganzes. Alle drei Sammlungen sind „dynamisch“, d. h. sie werden jedes Mal aktualisiert, wenn sich die Dokumentstruktur ändert. Daher verfügen sie immer über die neuesten und genauesten Informationen. Im Wesentlichen handelt es sich bei allen NodeList-Objekten um Abfragen, die in Echtzeit ausgeführt werden, während auf das DOM-Dokument zugegriffen wird.

Elementgröße

Offset-Dimension

Um den Offset eines Elements auf der Seite zu ermitteln, vergleichen Sie offsetLeft und offsetTop des Elements mit seinem offsetParent, indem Sie dieselben Attribute hinzufügen und eine Schleife ausführen Dadurch kann bis zum Wurzelelement ein grundsätzlich genauer Wert ermittelt werden. Die folgenden zwei Funktionen können verwendet werden, um den linken bzw. oberen Versatz des Elements zu ermitteln.

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
}

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
}

Client-Dimension (Client-Dimension)

Um die Browser-Ansichtsfenstergröße zu bestimmen, können Sie clientWidth und document.documentElement oder document.body (in Versionen vor IE7) clientHeight verwenden.

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
}

Scroll-Dimension (Scroll-Dimension)

······················

Bestimmen Die Methode element size

document.getBoundingClientRect() gibt ein rechteckiges Objekt zurück. Enthält 4 Attribute: links, oben, rechts und unten. Diese Eigenschaften geben die Position des Elements auf der Seite relativ zum Ansichtsfenster an.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das DOM-Wissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!