Ausführliches Tutorial zum Abrufen von HTML-DOM-Elementen mit JS

In diesem Artikel werden hauptsächlich die 8 Methoden zum Abrufen von HTML-DOM-Elementen in JS vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen.

Was ist HTML-DOM?

Das Dokumentobjektmodell (DokumentObjektmodell) wird von der W3C-Organisation empfohlen Standard-Programmierschnittstelle für den Umgang mit erweiterbaren Markup-Sprachen. Ein einfaches Verständnis ist, dass HTML DOM ein Standard zum Abrufen, Ändern, Hinzufügen oder Löschen von HTML-Elementen ist. Alle Vorgänge, die wir mit JavaScript auf Webseiten ausführen, werden über das DOM ausgeführt.

In diesem Artikel wird keine tiefgreifende Recherche betrieben, sondern lediglich verschiedene Verwendungszwecke und Fallstricke zusammengefasst.

JS-Methoden zum Abrufen von DOM-Elementen (8 Möglichkeiten)

1. Get by ID (getElementById)

2. Nach Namensattribut (getElementsByName)

3. Nach Tag-Namen (getElementsByTagName)

4. Nach Klassennamen (getElementsByClassName)

5. Methode zum Abrufen von HTML (document.documentElement)

6. Methode zum Abrufen von Text (document.body)

7. Ein Element über den Selektor abrufen (querySelector)

8. Einen Satz von Elementen über den Selektor abrufen (querySelectorAll)
   

Beginnen wir mit der Erklärung nacheinander.

1. Nach ID abrufen (getElementById)

document.getElementById('id')

Verwendung:

1. Der Kontext muss dokumentiert sein.

2. Parameter müssen übergeben werden. Die Parameter sind vom Typ String und werden verwendet, um die ID des Elements zu erhalten.

3. Der Rückgabewert erhält nur ein Element und gibt null zurück, wenn es nicht gefunden wird.

pit~~pit pit~pit pit~pit pit~:

1. Wenn es mehrere IDs gibt, holen Sie sich nur die erste, d. h. welche zuerst erscheint. Im Allgemeinen erscheint dieselbe ID nicht zweimal auf der Seite.

2. In IE6 und 7 wird der Name des Formularelements als ID-Wert abgerufen. Daher muss jeder bei der Definition darauf achten.

3. In IE6 und 7 wird die Groß-/Kleinschreibung nicht beachtet.

4. Sie können die ID des Elements direkt verwenden, um dieses Element darzustellen. (In Projekten nicht empfohlen)

5. Der Kontext eines über ID erhaltenen Elements kann nur dokumentieren. Warum muss der Kontext document sein? Weil sich die getElementById-Methode auf dem Prototyp der Document-Klasse befindet. Vielleicht verstehen Sie das nicht, also lesen Sie weiter.

2. Über das Namensattribut (getElementsByName)

document.getElementsByName('name')

Verwendung:

1. Der Kontext muss dokumentiert sein.

2. Parameter müssen übergeben werden, und die Parameter dienen dazu, das Namensattribut des Elements zu erhalten.

3. Der Rückgabewert ist ein Array-ähnliches Array. Wenn er nicht gefunden wird, wird ein leeres Array zurückgegeben.

pit~~pit pit~pit pit~pit pit~:

1. Das erhaltene Ergebnis ist ein Array, kein Array.

2. Im IE-Browser können wir es natürlich nur zum Abrufen von Formularelementen verwenden Formelemente.

3. Der Kontext kann aus dem gleichen Grund wie getElementById nur dokumentieren.

3. Nach Tag-Namen (getElementsByTagName)

document.getElementsByTagName('p');
var op = document.getElementById('pId');
op.getElementsByTagName('p');

Verwendung:

1. Der Kontext kann ein Dokument oder ein Element sein.

2. Der Parameter dient zum Abrufen des Tag-Namensattributs des Elements, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird.

3. Der Rückgabewert ist ein Array-ähnliches Array. Wenn er nicht gefunden wird, wird ein leeres Array zurückgegeben.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1 Das erhaltene Ergebnis ähnelt einem Array.

2. Der Kontext muss kein Dokument sein, da sich die getElementsByTagName-Methode nicht nur auf dem Prototyp der Document-Klasse, sondern auch auf dem Prototyp des Elements befindet Klasse, sodass sowohl Dokument als auch Element verwendet werden können. Verwenden Sie diese Methode. Wenn Sie es immer noch nicht verstehen, erkläre ich es am Ende des Artikels.

4. Nach Klassenname (getElementsByClassName)

Verwendung (ähnlich wie getElementsByTagName):

1 Dokument sein, kann auch ein Element sein.

2. Der Parameter ist der Klassenname des Elements.

3. Der Rückgabewert ist ein Array-ähnliches Array. Wenn er nicht gefunden wird, wird ein leeres Array zurückgegeben.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1 Das erhaltene Ergebnis ähnelt einem Array.

2.IE8 und frühere Versionen sind nicht kompatibel. Schade, dass eine so nützliche Methode nicht kompatibel ist.

5. Methode zum Abrufen von HTML (document.documentElement)

document.documentElement wird speziell zum Abrufen des HTML-Tags verwendet.

6. Methode zum Abrufen des Body-Tags (document.body)

document.body wird speziell zum Abrufen des Body-Tags verwendet.

7. Holen Sie sich ein Element über den Selektor (querySelector)

Verwendung:

1 Der Kontext kann sein , Kann auch ein Element sein.

2. Der Parameter ist ein Selektor, wie zum Beispiel: „p .className“.

3. Der Rückgabewert erhält nur ein Element.

Kengkeng~~kengkeng~kengkeng~kengkeng~:

Diese Methode ist nicht mit IE7 und früheren Versionen kompatibel und es scheint, dass Unternehmen, die mit IE7 kompatibel sind, nicht mehr berücksichtigt werden.

8. Holen Sie sich eine Reihe von Elementen über den Selektor (querySelectorAll)

Die Verwendung ist ähnlich wie bei querySelector:

1 . Kontext Es kann ein Dokument oder ein Element sein.

2. Der Parameter ist ein Selektor, wie zum Beispiel: „p .className“.

3. Der Rückgabewert ist ein Array-ähnlicher Wert.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

Gleiche wie querySelector, nicht kompatibel mit IE7.

Nachdem wir nun über die 8 Methoden zum Abrufen von DOM-Elementen mit nativem JS gesprochen haben, sprechen wir darüber, warum einige Methoden nur für Dokumente verwendet werden können.

Nehmen wir als Beispiel p ist eine Instanz der HTMLpElement-Klasse und document ist eine Instanz von HTMLDocument.

Ihre Vererbungsbeziehung:

HTMLpElement > EventTarget; EventTarget

Wir alle wissen, dass Unterklassen die übergeordnete Klasse erben und die Unterklasse die
Eigenschaften und Methoden

der übergeordneten Klasse verwenden kann.

Ihre gleiche Vererbungsbeziehung ist Node und EventTarget, was bedeutet, dass sie alle die Methoden auf Node und EventTarget verwenden können.

Wie nodeName, parentNode usw. auf Node und addEventListener auf EventTarget usw.

getElementById befindet sich nur im Prototyp der Document-Klasse. HTMLpElement erbt die Document-Klasse nicht, daher kann p die getElementById-Methode nicht verwenden.
getElementsByTagName befindet sich im Prototyp der Document-Klasse und auch im Prototyp der Element-Klasse, sodass sowohl p als auch document die Methode getElementsByTagName verwenden können.

Andere sind gleich.

Das obige ist der detaillierte Inhalt vonAusführliches Tutorial zum Abrufen von HTML-DOM-Elementen mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!