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
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('p').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('p')[0];// <p class="opener"> document.getElementsByTagName('p').item(0);//和上面的结果一样 document.getElementsByTagName('p')[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('p')[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('p')[0].className;//opener
Wir können mit der folgenden Methode auf alle Elemente der Seite zugreifen
<span style="color: #ff0000;">document.getElementsByTagName('*').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('closer') 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
