Document Object Model , abgekürzt DOM, Chinesisch:文档对象模型, ist标准编程接口für die Verarbeitung erweiterbarer Auszeichnungssprachen.
DOM Tree bezieht sich auf解析der HTML -Seite über DOM und生成der HTML树状结构HTML tree der entsprechenden访问方法. Mithilfe von DOM Tree können wir jeden Markup-Inhalt auf der HTML-Seite direkt und简易bedienen, z. B. den folgenden HTML-Code
< html><head>
<title>Spielen mit Dom</title></head><body>
<p>Ich bin ein Dom-Knoten</p>
<p>
<p>p p</p>
</p></body></html> Wie folgt in den DOM-Baum abstrahiert: 
DOM
erstellt und hinzufügt, wie man DOM
Es gibt viele APIs, um DOM zu bekommen, aber sie sind alle sehr einfach
:
document.getElementById("id name"); Beispiel:
<body>
<p id="p">Ich bin P-Knoten</p>
<Skript>
var p = document.getElementById("p");
console.log(p);
</script></body> 
Öffnen Sie die Konsole und Sie können sehen, dass Sie den Vorgang erfolgreich abgeschlossen haben
:
document.getElementsByTagName("tag name"); Beispiel:
<body>
<p>Ich bin P-Knoten</p>
<p>Ich bin auch ein P-Knoten</p>
<Skript>
var p = document.getElementsByTagName("p");
console.log(p);
for (let i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
Hinweis : Verwenden Sie die Methode getElementsByTagName(), um eine Sammlung von Objekten mit angegebenen Tag-Namen zurückzugeben. Wenn wir die darin enthaltenen Elemente verarbeiten möchten, müssen wir sie durchlaufen Methode sind dynamisch von
:
document.getElementsByClassName("class name"); Beispiel:
<body>
<p class="p">Ich bin P-Knoten</p>
<p class="p">Ich bin P-Knoten</p>
<Skript>
var p = document.getElementsByClassName("p");
console.log(p);
for (let i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
Auch das ist ganz einfach, merken Sie es sich einfach
Syntax über die neue HTML5-API:
document.querySelector("Siehe Beispiele für Details"); document.querySelectorAll
("Siehe Beispiele für Details"
);
<p class="p">Ich bin P-Knoten</p>
<p class="name">Birnenblüte</p>
<p id="info">Informationen</p>
<Skript>
// Var nach Tag-Namen abrufen p = document.querySelector("p");
// Über den Klassennamen erhalten, denken Sie daran, var hinzuzufügen qname = document.querySelector(".name");
// Nach ID abrufen, nicht vergessen, # hinzuzufügen
var info = document.querySelector("#info");
// Alle übereinstimmenden Elemente abrufen und das Array zurückgeben var all = document.querySelectorAll("p");
console.log(p);
console.log(qname);
console.log(info);
for (let i = 0; i < all.length; i++) {
console.log(all[i]);
}
</script></body> 
Wie Sie sehen, ist die Verwendung der neuen API von HTML5 sehr flexibel, daher verwende ich diese sehr gerne und empfehle Ihnen die Verwendung von
. Darüber hinaus gibt es einige spezielle Elemente, die über eigene Erfassungsmethoden verfügen, z Als Körper
:
document.body;
Beispiel:
<body>
<Skript>
var body = document.body;
console.log(body);
</script></body> 
Wie Sie sehen, wurde der gesamte Inhalt des Body-Elements erfolgreich abgerufen.
:
document.documentElement
Beispiel:
<body>
<Skript>
var html = document.documentElement;
console.log(html);
</script></body> 
Wie Sie sehen, wurde der gesamte HTML-Code der Webseite erhalten. Jetzt beginnen wir mit der dynamischen Erstellung und dem Hinzufügen von
DOM
Das Betreiben von Dom ist dasselbe wie das Spielen mit Daten, das Hinzufügen, Löschen, Ändern und Überprüfen. Wenn wir Daten hinzufügen, müssen wir sie zuerst hinzufügen Zuerst müssen wir das DOM erstellen und ihm dann mitteilen, wo es hinzugefügt werden soll. Nachfolgend erfahren Sie, wie Sie ein Dom erstellen,
. Hab keine Angst, haha
Syntax:
document.createElement("Element Name") ;
Element p dynamisch erstellen möchten, können Sie es wie folgt schreiben: Apply inferences
var p = document.createElement("p"); Hier gibt es zwei Typen . Verwenden Sie sie je nach Situation. Hängen Sie sie am Ende des untergeordneten Elements an
. Die-Syntax
lautet
:
<body>
<p>
<a href="">Baidu</a>
</p>
<Skript>
var p = document.createElement("p");
p.innerText = „Ich bin p“
var p = document.querySelector("p");
p.appendChild(p);
</script></body> 
Erstellen Sie dynamisch das Element p-Absatz-Tag und schreiben Sie den Text „Ich bin p“. Rufen Sie abschließend das p-Element ab und hängen Sie p als untergeordnetes Element von p an, sodass der Effekt wie in der Abbildung dargestellt ist Oben.
Syntax
:
node.insertBefore
(child, spezifiziertes Element);
<p>
<a href="">Baidu</a>
<span>Ich bin der jüngere Bruder Span</span>
</p>
<Skript>
var p = document.createElement("p");
p.innerText = „Ich bin p“
var p = document.querySelector("p");
var a = document.querySelector("a");
//Erstelle p unter p, vor dem a-Element p.insertBefore(p, a);
</script></body> 
Ist das das Ende? Ja, was meinst du? Ist es nicht sehr einfach? Jetzt müssen wir nur noch mehr üben. Fahren wir mit dem nächsten Schritt fort.
lässt sich wie folgt zusammenfassen:
Beispiel 1: Holen Sie sich das p-Tag der Seite und ändern Sie den Inhalt in „Zhou Qiluo“
<body>
<p>
<p></p>
</p>
<Skript>
var p = document.querySelector("p");
p.innerText = "Zhou Qiluo";
</script></body> Beispiel 2: Klicken Sie auf die Schaltfläche, um einen Baidu-Hyperlink
<body>zu generieren
<p>
<button onclick="createBaidu()">Klicken Sie hier, um einen Baidu-Hyperlink zu generieren</button>
</p>
<Skript>
Funktion createBaidu() {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = „Suchen Sie einfach nach Baidu und Sie werden es wissen“;
p.append(a);
}
</script></body> 
Beispiel 3: Klicken Sie auf die Schaltfläche, die Textfarbe im p-Tag wird grün und der Hundekopf
<body>wird manuell geändert.
<p>
<button onclick="changeColor()">Klicken, um grün zu werden</button>
<p>Ich werde gleich grün werden</p>
</p>
<Skript>
Funktion changeColor() {
var p = document.querySelector("p");
p.style.color = "grün";
}
</script></body> 
(
)löscht
einen untergeordneten Knoten aus dem DOM und gibt den gelöschten Knoten zurück.
Syntax:
node.removeChild(child);
<p>
<button onclick="removeP()">Klicken Sie, um p zu entfernen</button>
<p>Ich bin p, die Zeit wird gleich abgelaufen</p>
</p>
<Skript>
Funktion removeP() {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(p);
}
</script></body> 