JavaScript – Document Object Model (DOM)

<p> DOM detaillierte Erläuterung: Die Programmierschnittstelle des Webdokuments

<p> DOM (Dokumentobjektmodell) ist eine Programmierschnittstelle für Webdokumente. Mit Hilfe von DOM können Entwickler JavaScript verwenden, um die Webseite dynamisch zu interagieren und die Webseite zu bedienen. Mit HTML DOM kann JavaScript den Inhalt von HTML -Elementen ändern.

<p>

So finden Sie auf der HTML -Seite HTML -Elemente auf HTML -Elemente? <p> Finden Sie HTML -Elemente gemäß ID

• Beispiel:

Finden Sie das HTML -Element gemäß dem Labelnamen <p>

<code class="language-javascript">const element = document.getElementById("intro");</code>

Beispiel:
• Finden Sie HTML -Elemente gemäß dem Kategoriennamen

<p>

Beispiel:

<code class="language-javascript">const element = document.getElementsByTagName("p");</code>

• Verwenden Sie den CSS -Selektor, um das HTML -Element zu finden

Methode verwenden, um alle HTML -Elemente zu finden, die mit dem angegebenen CSS -Selektor übereinstimmen (ID, Klassenname, Typ, Attribut, Attributwert usw.). <p>

Beispiel: Finden Sie das Absatzelement mit einer Art von "Intro":

<code class="language-javascript">const x = document.getElementsByClassName("intro");</code>

• Verwenden Sie die HTML -Objektsammlung, um das HTML -Element
zu finden

<p> Knoten (Knoten) querySelectorAll()

Der Inhalt von <p> DOM sind Knoten wie Elemente, Text, Attribute.

<code class="language-javascript">const x = document.querySelectorAll("p.intro");</code>

Elementknoten:

• bedeutet HTML- oder XML -Elemente. Zum Beispiel: ,
,

, <p> usw.

im obigen Beispiel ist <p> ein Elementknoten.

<p> Textknoten:

zeigt den Textinhalt im Element an. <p> <div> <h1> Der Text im Element "Hallo, Welt!" Ist ein Textknoten. <p> <span> Erstellen Sie ein neues HTML -Element (Knoten):

<code class="language-html"><h1>Hello, World!</h1></code>

<p> <h1> Elemente erstellen:

Verwenden Sie die Methode <p>, um HTML -Elemente zu erstellen. Textknoten erstellen:

Verwenden Sie <p>, um Textknoten zu erstellen.

<code class="language-html"><h1>Hello, World!</h1></code>

Text zum Element hinzufügen: <p> Verwenden Sie die Methode <h1>, um den erstellten Elementen Textknoten hinzuzufügen.

<p> Erstellen Sie ein DIV -Element: Verwenden Sie erneut

Element.

1. Fügen Sie das Element in das Div ein: Die in der Vorderseite erstellten Elemente in die Div. document.createElement() Fügen Sie das DIV in das Dokument ein:
Fügen Sie schließlich das DIV zum Dokumentangebot (oder eines anderen erforderlichen übergeordneten Elements) hinzu.
2. Beispielcode -Fragment (leicht definierter Code, nur den Schlüsselteil beibehalten): document.createTextNode()
3. Ändern Sie den HTML -Stil: appendChild() Grammatik:
4. Beispiel: () <p> Mit den oben genannten Methoden können Sie den Inhalt der Webseite effektiv bedienen und ändern.

Das obige ist der detaillierte Inhalt vonJavaScript – Document Object Model (DOM). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!