Heim > Artikel > Web-Frontend > Was ist DOM in JavaScript? So greifen Sie auf den Dom-Knoten zu

Was ist DOM in JavaScript? So greifen Sie auf den Dom-Knoten zu

伊谢尔伦Original: 2017-07-20 13:20:541944Durchsuche

DOM ist die Abkürzung für Document Object Model. Das Dokumentobjektmodell ist ein Dokument, das XML oder HTML in Form von Baumknoten ausdrückt. Mithilfe von DOM-Methoden und -Eigenschaften können Sie auf jedes Element auf der Seite zugreifen, es ändern, löschen und auch ein Element hinzufügen. DOM ist eine sprachunabhängige API, die in jeder Sprache implementiert werden kann, einschließlich Javascript

Sehen Sie sich den Text unten an.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
 <head> 
  <title>My page</title> 
 </head> 
 <body> 
  <p class="opener">first paragraph</p> 
  <p><em>second</em> paragraph</p> 
  <p id="closer">final</p> 
 </body> 
</html>

Werfen wir einen Blick auf den zweiten Absatz

<p><em>second</em> paragraph</p>

Sie können sehen, dass dies der Fall ist ein p-Tag. Es ist im Body-Tag enthalten. Body ist also der übergeordnete Knoten von p und p ist der untergeordnete Knoten. Der erste und dritte Absatz sind ebenfalls untergeordnete Knoten des Körpers. Sie sind alle Geschwisterknoten des zweiten Absatzes. Dieses em-Tag ist ein untergeordneter Knoten des zweiten Segments p. Daher ist p sein übergeordneter Knoten. Die Eltern-Kind-Knotenbeziehung kann eine baumartige Beziehung darstellen. Es heißt also DOM-Baum.

Zugriff auf DOM-Knoten

Bevor wir ein Formular validieren oder ein Bild ändern, müssen wir wissen, wie wir auf Elemente (Element) zugreifen. ). Es gibt viele Möglichkeiten, Elemente zu erhalten.
Dokumentknoten
Über Dokument können wir auf das aktuelle Dokument zugreifen. Wir können Firebugs (Firefox-Plug-in) verwenden, um die Eigenschaften und Methoden des Dokuments anzuzeigen.
Alle Knoten haben die Attribute nodeType, nodeName, nodeValue. Werfen wir einen Blick auf den KnotenTyp des Dokuments

document.nodeType;//9

Insgesamt gibt es 12 Knotentypen. Dokument ist 9. Häufig verwendete sind Element (Element: 1), Attribut (Attribut: 2) und Text (Text: 3).
Knoten haben auch Namen. für HTML-Tags. Der Knotenname ist der Labelname. Der Name des Textknotens (Text) ist #text. Der Name des Dokumentknotens (Dokument) ist

Knoten haben auch Werte. Bei Textknoten ist der Wert der Text. Der Wert von document ist null
documentElement
XML verfügt über einen ROOT-Knoten zum Umschließen des Dokuments. für HTML-Dokumente. Der ROOT-Knoten ist das HTML-Tag. Greifen Sie auf den Wurzelknoten zu. Sie können die Eigenschaften von documentElement verwenden.

document.documentElement;//<html> 
document.documentElement.nodeType;//1 
document.documentElement.nodeName;//HTML 
document.documentElement.tagName;//对于element，nodeName和tagName相同

Untergeordnete Knoten
Um festzustellen, ob es untergeordnete Knoten enthält, können wir die folgende Methode verwenden

document.documentElement.hasChildNodes();//true

HTML hat zwei untergeordnete Knoten.

document.documentElement.childNodes.length;//2 
 
document.documentElement.childNodes[0];//<head> 
 
document.documentElement.childNodes[1];//<body>

Sie können den übergeordneten Knoten auch über den untergeordneten Knoten erreichen

document.documentElement.childNodes[1].parentNode;//<html>

Wir weisen die zu Bezug auf die Körpervariablen

var bd = document.documentElement.childNodes[1]; 
bd.childNodes.length;//9

Schauen wir uns die Struktur des Körpers an

 
 first paragraph 
 <p><em>second</em> paragraph</p> 
 final

Warum sind untergeordnete Knoten 9?
Zuerst gibt es 4 P’s und einen Kommentar, insgesamt 4.
4 Knoten enthalten 3 leere Knoten. Das sind 7.
Der 8. leere Knoten zwischen Körper und erstem p.
Der neunte ist der leere Knoten zwischen dem Kommentar und 36cc49f0c466276486e50c850b7e4956.
Insgesamt 9 Knoten.

Schneller Zugriff auf DOM

Sie können über childNodes, parentNode, nodeName, nodeValue und Attribute auf jeden Knoten im Dokument zugreifen. In der tatsächlichen Anwendung sind Textknoten jedoch ziemlich nervig. Wenn sich der Text ändert, kann dies Auswirkungen auf das Skript haben. Wenn der DOM-Baum tief genug ist, ist es außerdem tatsächlich unpraktisch, darauf zuzugreifen. Glücklicherweise können wir auf bequemere Weise auf Knoten zugreifen. Diese Methoden sind

getElementsByTagName()
getElementsByName()
getElementById()

Lassen Sie uns zunächst über getElementsByTagName() sprechen.
Erhalten Sie eine Sammlung von HTML-Elementen über einen Tag-Namen. Das Beispiel lautet wie folgt:

document.getElementsByTagName(&#39;p&#39;).length;//3

Da es sich bei dem zurückgegebenen Objekt um eine Sammlung handelt, können wir in Form eines Array-Index oder über die Item-Methode darauf zugreifen. Zum Vergleich wird empfohlen, die Array-Zugriffsmethode zu verwenden. Einfacher.

document.getElementsByTagName(&#39;p&#39;)[0];// <p class="opener"> 
document.getElementsByTagName(&#39;p&#39;).item(0);//和上面的结果一样 
 
document.getElementsByTagName(&#39;p&#39;)[0].innerHTML;//first paragraph

Um auf die Attribute eines Elements zuzugreifen, können Sie die Attributsammlung verwenden. Der einfachere Weg besteht jedoch darin, direkt als Immobilie darauf zuzugreifen. Nehmen Sie ein Beispiel

document.getElementsByTagName(&#39;p&#39;)[2].id;//closer

Es ist zu beachten, dass das Klassenattribut nicht normal verwendet werden kann. . Verwenden Sie Klassenname. Weil „class“ ein reserviertes Wort in der JavaScript-Spezifikation ist.

document.getElementsByTagName(&#39;p&#39;)[0].className;//opener

Wir können mit der folgenden Methode auf alle Elemente der Seite zugreifen

<span style="color: #ff0000;">document.getElementsByTagName(&#39;*&#39;).length;//9</span>

Hinweis: In den frühen Tagen von IE Die Version unterstützt die obige Methode nicht. Kann durch document.all ersetzt werden. IE7 unterstützt es bereits, es werden jedoch alle Knoten zurückgegeben, nicht nur Elementknoten.

Siblings, Body, First, Last Child
nextSibling und previousSibling sind zwei weitere bequeme Möglichkeiten, auf das DOM zuzugreifen. Wird verwendet, um auf benachbarte Knoten zuzugreifen. Beispiele sind wie folgt:

var para = document.getElementById(&#39;closer&#39;) 
para.nextSibling;//"\n" 
para.previousSibling;//"\n" 
para.previousSibling.previousSibling;//<p> 
para.previousSibling.previousSibling.previousSibling;//"\n" 
para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">

body wird verwendet, um auf das body-Element zuzugreifen.

document.body;//<body>

firstChild und lastChild . firstChild ist dasselbe wie childNodes[0]. lastChild ist dasselbe wie childNodes[childNodes.length - 1].

Das obige ist der detaillierte Inhalt vonWas ist DOM in JavaScript? So greifen Sie auf den Dom-Knoten zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung, wie Sie mit JavaScript dom Instanzen von HTML-Elementen erstellen und löschenNächster Artikel：Ausführliche Erklärung, wie Sie mit JavaScript dom Instanzen von HTML-Elementen erstellen und löschen

In Verbindung stehende Artikel

Mehr sehen