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
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
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
Texttyp
DocumentFragment-Typ
Zweck: Offline-Betrieb von DOM-Elementen, um eine massive Neuanordnung und Neuzeichnung von DOM-Knoten zu vermeiden, was zu Leistungsproblemen führt
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;
}Nach dem Login kopieren
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
};
}
}Nach dem Login kopieren
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!
