Zusammenfassung der JavaScript-Wissenspunkte: DOM

1. Einführung in DOM

1.1 Was ist DOM?

Eine vollständige JavaScript-Implementierung besteht aus den folgenden drei verschiedenen Teilen:

• Kern (ECMAScript): Der Kernteil der Sprache, der die Syntax und grundlegende Objekte der Sprache beschreibt.

• Document Object Model (DOM): Standard für den Betrieb von Webseitendokumenten, der Methoden und Schnittstellen zur Verarbeitung von Webseiteninhalten beschreibt.

• Browser Object Model (BOM): Die Grundlage für Client- und Browserfensteroperationen und beschreibt die Methoden und Schnittstellen für die Interaktion mit dem Browser.

Document Object Model ( Document Object Model，简称DOM ) ist eine von der W3C-Organisation empfohlene编程接口für die Verarbeitung erweiterbarer Auszeichnungssprachen (HTML oder XML).
W3C hat eine Reihe von DOM-Schnittstellen definiert, über die Inhalt, Struktur und Stil von Webseiten geändert werden können.

Offizielle Sprache: Document Object Model (DOM) ist eine von der W3C-Organisation empfohlene Standardprogrammierschnittstelle für die Verarbeitung erweiterbarer Auszeichnungssprachen. Es handelt sich um eine plattform- und sprachunabhängige Anwendungsprogrammierschnittstelle (API), die dynamisch auf Programme und Skripte zugreifen und deren Inhalt, Struktur und Stil von WWW-Dokumenten aktualisieren kann (HTML- und XML-Dokumente werden durch Beschreibungsabschnitte definiert). Das Dokument kann weiter bearbeitet werden und die Ergebnisse der Bearbeitung können der aktuellen Seite hinzugefügt werden. DOM ist ein baumbasiertes API-Dokument, das erfordert, dass das gesamte Dokument während der Verarbeitung im Speicher dargestellt wird. Eine weitere einfache API ist ereignisbasiertes SAX, mit dem sehr große XML-Dokumente verarbeitet werden können. Da sie groß sind, eignen sie sich nicht für die Verarbeitung aller im Speicher befindlichen Dokumente.

1.2 DOM-Baum

• Dokument: Eine Seite ist ein Dokument. Ein Dokument wird im DOM zur Darstellung
• von Elementen verwendet: Alle Tags auf der Seite sind Elemente, und das Element wird im DOM zur Darstellung
• von Knoten verwendet: Der gesamte Inhalt der Webseite besteht aus Knoten (Beschriftungen, Attribute, Text, Kommentare usw.) Verwenden Sie den Knoten im DOM

DOM 把以上内容都看做是对象

2.1 So

erhalten Sie Seitenelemente

: DOM wird hauptsächlich zum Betreiben von Elementen in unserer tatsächlichen Entwicklung verwendet.
Wie erhalten wir die Elemente auf der Seite? Sie können die Elemente auf der Seite auf folgende Weise abrufen:

• Basierend auf der ID abrufen.
• Basierend auf dem Tag-Namen abrufen.
• Spezielle Elemente
• über neue Methoden in HTML5
abrufen
• 
  

2.2 Basierend auf der ID abrufen

Verwenden Sie die Methode getElementById(), um das Elementobjekt mit der ID abzurufen.

document.getElementById('id');

Verwenden Sie console.dir(), um das erhaltene Elementobjekt zu drucken und die Eigenschaften und Methoden im Objekt besser anzuzeigen.

2.3 Abrufen basierend auf dem Tag-Namen

Verwenden Sie die Methode getElementsByTagName(), um eine Sammlung von Objekten mit dem angegebenen Tag-Namen zurückzugeben.

document.getElementsByTagName('tag name');

Hinweis:

1. Da wir eine Sammlung von Objekten erhalten, müssen wir diese durchlaufen, wenn wir die darin enthaltenen Elemente bearbeiten möchten.
2. Das Abrufen des Elementobjekts erfolgt dynamisch.

2.4 Erhalten Sie document.getElementsByClassName('class name') über die neue Methode von HTML5

. // Geben Sie die Elementobjektsammlung gemäß dem Klassennamen zurück. document.querySelector('selector'); der angegebene Selektor Das erste Elementobjekt document.querySelectorAll('selector'); // Rückgabe gemäß dem angegebenen Selektor

注意：
Die Selektoren in querySelector und querySelectorAll müssen markiert werden, zum Beispiel: document.querySelector('#nav');

2.5 Spezielle Elemente abrufen (Body, HTML)

1. Das Body-Element abrufen

doucumnet.body // Das Body-Elementobjekt zurückgeben

2. Das HTML-Element abrufen

document.documentElement // Das HTML-Elementobjekt zurückgeben

3. Ereignisgrundlagen

3.1 Ereignisübersicht

JavaScript aktiviert uns, um dynamische Seiten zu erstellen, und Ereignisse sind Verhaltensweisen, die von JavaScript erkannt werden können.
简单理解： 触发--- 响应机制。
Jedes Element auf der Webseite kann bestimmte Ereignisse generieren, die JavaScript auslösen können. Wir können beispielsweise ein Ereignis generieren, wenn der Benutzer auf eine Schaltfläche klickt, und dann bestimmte Vorgänge ausführen.

3.2 Drei Elemente von Ereignissen:

1. Ereignisquelle (wer)
2. Ereignistyp (welches Ereignis)
3. Ereignishandler (was zu tun ist)

Fall:

var btn = document.getElementById('btn');
btn.onclick = function() {
 alarm('Wie geht es dir'); 
};

3.3 Schritte zum Ausführen von Ereignissen:

1. Ereignisquelle abrufen,
2. Ereignis registrieren (Ereignis binden)
3. , Ereignishandler hinzufügen (in Form einer Funktionszuweisung)

3.3 Häufige Mausereignisse

注：以下图片的事件只是常见的并不代表所有

3.4 Analysieren Sie die drei Elemente

von Ereignissen:
1. Ereignisquelle (was möchten Sie bearbeiten)

2. Ereignis (was möchten Sie tun, um den gewünschten Interaktionseffekt zu erzielen)

3. Verarbeitungsfunktion (wie soll das Ziel nach Ablauf des Ereignisses aussehen)

4 . Operationselemente

JavaScript-DOM-Operationen können den Inhalt, die Struktur und den Stil von Webseiten ändern. Wir können DOM-Operationselemente verwenden, um den Inhalt, die Attribute usw. innerhalb der Elemente zu ändern.

4.1

handelt

element.innerText

von der Startposition in die Endposition, entfernen Sie jedoch gleichzeitig

den gesamten Inhalt durch

Positionieren Sie es an der Endposition von

element.innerHTML

4.2 Gemeinsame Elementattributoperationen

innerText und innerHTML zum Ändern des Elementinhalts
src,href
id, alt, title

4.3 Attributoperationen von Formularelementen

Sie können DOM verwenden, um die Attribute der folgenden Formularelemente zu bedienen:

Typ, Wert, aktiviert, ausgewählt, deaktiviert

4.4 Stilattributoperationen

Wir können Größe, Farbe, Position und andere Stile ändern von Elementen durch JS.

1. element.style Inline-Stiloperation
2. element.className Stiloperation für Klassennamen

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

die Bedienelemente sind der Kerninhalt des DOM.

4.5 Ausschließendes Denken

Wenn es dieselbe Gruppe von Elementen gibt und wir möchten, dass ein bestimmtes Element einen bestimmten Stil implementiert, müssen wir den exklusiven Schleifenalgorithmus verwenden:

1. Löschen Sie die Stile aller Elemente (töten Sie andere Personen)
2. und legen Sie den Stil für das aktuelle Element fest ( Ich lasse mich in Ruhe.
3. Beachten Sie, dass die Reihenfolge nicht sein kann. Umgekehrt, töten Sie zuerst andere Menschen und setzen Sie sich dann selbst ein.

4.6 Betrieb benutzerdefinierter Attribute

1. Holen Sie sich den Attributwert

• element.property Holen Sie sich den Attributwert.
• element.getAttribute('attribute');

Unterschied:

• element.attribute ruft den integrierten Attributwert ab (das Attribut, das mit dem Element selbst geliefert wird).
• element.getAttribute('attribute'); ruft hauptsächlich die benutzerdefinierten Attribute (Standard) ab, die von angepasst werden unsere Programmierer Eigenschaft

2. Legen Sie den Eigenschaftswert fest

• element.property = 'value' Legen Sie den integrierten Eigenschaftswert fest.
• element.setAttribute('Attribute', 'Value');

Unterschied:

• element.Attribute legt den integrierten Attributwert fest
• element.setAttribute('Attribute'); Legt hauptsächlich benutzerdefinierte Attribute fest (Standard)

3. Attribute entfernen

• element.removeAttribute(' Eigenschaften ');

4.7 Benutzerdefinierte H5-Eigenschaften

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

Benutzerdefinierte Attribute werden über getAttribute('attribute') abgerufen.
Einige benutzerdefinierte Attribute können jedoch leicht zu Mehrdeutigkeiten führen und es ist schwierig zu bestimmen, ob es sich um integrierte Attribute oder benutzerdefinierte Attribute des Elements handelt.

H5 hat uns neue benutzerdefinierte Attribute hinzugefügt:

1. Benutzerdefinierte H5-Attribute festlegen

H5 legt fest, dass der Anfang der benutzerdefinierten Attributdaten als Attributname verwendet und einem Wert zugewiesen werden soll.

element.setAttribute('data-index', 2)

festzulegen

2. Benutzerdefinierte H5-Attribute abrufen <br/> Kompatibilität Get element.getAttribute('data-index');
H5 hat element.dataset.index oder element.dataset['index'] hinzugefügt, was nur in IE 11 unterstützt wird.

5. Knotenoperationen

verwenden normalerweise zwei Methoden, um Elemente abzurufen:
1. Verwenden Sie die von DOM bereitgestellten Methoden, um Elemente wie

• document.getElementById(),
• document.getElementsByTagName(),
• document.querySelector usw. abzurufen.  Die Logik ist nicht stark und umständlich.

• Verwenden

Sie die hierarchische Beziehung des Knotens, um Elemente abzurufen

• -Kind-Geschwister-Knotenbeziehung zum Abrufen von Elementen,
• aber etwas weniger kompatibel.

Beide

Elementknoten

abrufen, die später verwendet werden, aber Knotenoperationen sind einfacher

Knoten (Beschriftung, Attribut, Text, Kommentar usw.) Im DOM wird ein Knoten zum Darstellen verwendet.
Auf alle Knoten im HTML-DOM-Baum kann über JavaScript zugegriffen werden, und alle HTML-Elemente (Knoten) können geändert, erstellt oder gelöscht werden.

Im Allgemeinen verfügen Knoten über mindestens drei grundlegende Attribute: nodeType (Knotentyp), nodeName (Knotenname) und nodeValue (Knotenwert).

• Der Elementknoten nodeType ist 1,
• der Attributknoten nodeType ist 2
• und der Textknoten nodeType ist 3 (Textknoten umfassen Text, Leerzeichen, Zeilenumbrüche usw.).

我们在实际开发中，节点操作主要操作的是元素节点

5.3 Node Die Ebene

verwendet den DOM-Baum, um die Knoten zu unterteilen. Die häufigste ist父子兄层级关系

1.

Übergeordneter Knoten

node.parentNode

um

• den neuesten übergeordneten Knoten handelt.
• Wenn der angegebene Knoten keinen übergeordneten Knoten hat, wird null zurückgegeben.

childNodes (Standard)

parentNode.childNodes gibt include zurück. Eine Sammlung untergeordneter Knoten des angegebenen Knotens, bei der es sich um eine sofort aktualisierte Sammlung handelt.
Hinweis: Der Rückgabewert enthält alle untergeordneten Knoten, einschließlich Elementknoten, Textknoten usw.
Wenn Sie nur die Elementknoten erhalten möchten, müssen Sie dies speziell behandeln. Daher empfehlen wir im Allgemeinen nicht die Verwendung von childNodes

var ul = document. querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. nodeType == 1 ) {
 // ul.childNodes[i] ist der Elementknoten console.log(ul.childNodes[i]);}}

2. parentNode.children (nicht standardmäßig)

parentNode.children ist eine schreibgeschützte Eigenschaft, die alle untergeordneten Elementknoten zurückgibt. Es werden nur untergeordnete Elementknoten zurückgegeben, andere Knoten werden nicht zurückgegeben (darauf konzentrieren wir uns).
Obwohl es sich bei „Children“ nicht um einen Standard handelt, wird es von verschiedenen Browsern unterstützt, sodass wir

3. parentNode.firstChild „

firstChild“ sicher verwenden können, um den ersten untergeordneten Knoten zurückzugeben, oder null, wenn er nicht gefunden wird. Ebenso sind alle Knoten enthalten.

4. parentNode.lastChild

lastChild gibt den letzten untergeordneten Knoten zurück oder null, wenn er nicht gefunden wird. In ähnlicher Weise enthält es auch alle Knoten.

5. parentNode.firstElementChild.

firstElementChild gibt den ersten untergeordneten Elementknoten zurück. Wenn er nicht gefunden wird, wird null zurückgegeben.

6. parentNode.lastElementChild

lastElementChild gibt den letzten untergeordneten Elementknoten zurück oder null, wenn er nicht gefunden wird.
注意：这两个方法有兼容性问题，IE9 以上才支持

In der tatsächlichen Entwicklung enthalten firstChild und lastElementChild andere Knoten. Und wie erhalten wir das erste Kind? Elementknoten oder Was ist mit dem letzten untergeordneten Elementknoten?
Lösung:

1. Wenn Sie den ersten untergeordneten Elementknoten möchten, können Sie parentNode.chilren[0] verwenden.
2. Wenn Sie den letzten untergeordneten Elementknoten möchten, können Sie

parentNode.chilren[parentNode.chilren.length - 1]

Summary

Document Object Model (Document Object Model (kurz DOM) ist eine von der W3C-Organisation empfohlene Standardprogrammierschnittstelle für die Verarbeitung erweiterbarer Auszeichnungssprachen (HTML oder XML).

W3C hat eine Reihe von DOM-Schnittstellen definiert, über die Inhalt, Struktur und Stil von Webseiten geändert werden können.

Für JavaScript verfügt JavaScript über einen eigenen Satz von DOM-Programmierschnittstellen, damit JavaScript mit HTML arbeiten kann.

Für HTML sorgt DOM dafür, dass HTML einen DOM-Baum bildet.

Das DOM-Element, das Dokumente, Elemente und Knoten enthält, ist ein Objekt, daher wird es als Dokumentobjektmodell bezeichnet

. In Bezug auf DOM-Operationen konzentrieren wir uns hauptsächlich auf die Operation von Elementen. Dazu gehören hauptsächlich Erstellung, Hinzufügung, Löschung, Änderung, Abfrage, Attributoperation und Ereignisoperation.