Heim > Artikel > Web-Frontend > Beherrschen Sie die DOM-Attributmitglieder und den Dokumentenfluss vollständig

Beherrschen Sie die DOM-Attributmitglieder und den Dokumentenfluss vollständig

WBOYOriginal: 2022-08-05 15:36:501529Durchsuche

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich Probleme im Zusammenhang mit DOM-Attributmitgliedern und dem Dokumentfluss vor. Das Formular ist von oben nach unten in Zeilen unterteilt, und drücken Sie in jeder Zeile auf „Elemente der Reihe nach von links nach rechts anordnen“. ist der Dokumentenfluss. Ich hoffe, er wird für alle hilfreich sein.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Dokumentenfluss:

Teilen Sie das Formular von oben nach unten in Zeilen auf und drücken Sie in jeder Zeile von links nach rechts. Die sekundäre Seite Emissionselement ist der gewöhnliche Fluss/Dokumentenfluss.

Textfluss:

Die Reihenfolge des Lesens und Ausgebens von Dokumenten. Dies ist die Form des Lesens und Ausgebens von links nach rechts und von oben nach unten, die wir normalerweise sehen.

Die Situation, aus dem Dokumentenfluss auszubrechen:

1. Float wird aus dem Dokumentenfluss ausbrechen, aber nicht aus dem Textfluss, > ; umschließen

2. Position: absolut/fest Die absolute Positionierung führt dazu, dass das Element aus dem Dokumentfluss ausbricht und der Textfluss darin ignoriert wird

Dokumentfluss und Textfluss können Es wird als Schnittstelle zum Positionieren/Positionieren verstanden

DOM

JavaScript zum Bedienen von Webseiten, und der vollständige Name lautet „Document Object Model“ (Dokumentobjektmodell).

Es gibt mehrere Konzepte: Dokument, Element, Knoten

Das gesamte Dokument ist ein Dokumentknoten

Jede Beschriftung ist ein Elementknoten

Der im Element enthaltene Text ist ein Textknoten

Jedes Attribut ist ein Attributknoten

Anmerkungen gehören zu Anmerkungsknoten

DOM-Baum:

DOM-Baum ist eine Struktur

Die sogenannte hierarchische Struktur bezieht sich auf die Beziehung zwischen Elementen und Elementen

Vater und Sohn, Bruder

Der vom Parser ausgegebene Baum ist Bestehend aus DOM-Elementen und Attributknoten. Bestehend aus

Wenn wir sagen, dass der Baum DOM-Knoten enthält, bedeutet dies, dass der Baum aus Elementen besteht, die die DOM-Schnittstelle implementieren. Diese Implementierungen umfassen andere Eigenschaften, die intern von Browsern benötigt werden.

Die hierarchische Strukturbeziehung bleibt nach Verlassen des Dokumentenflusses unverändert

HTML-DOM-Attribute

Attribute sind die Werte von Knoten (HTML-Elementen), die Sie abrufen oder festlegen können.

Programmierschnittstelle

bietet Zugriff auf das HTML-DOM über JavaScript (und andere Programmiersprachen).

Alle HTML-Elemente werden als Objekte definiert und Programmierschnittstellen sind Objektmethoden und Objekteigenschaften.

Methoden sind Aktionen, die Sie ausführen können (z. B. das Hinzufügen oder Ändern von Elementen).

Eigenschaften sind Werte, die Sie abrufen oder festlegen können (z. B. der Name oder Inhalt eines Knotens).

innerHTML-Eigenschaft

Der einfachste Weg, den Inhalt eines Elements abzurufen, ist die Verwendung der innerHTML-Eigenschaft.

Das innerHTML-Attribut ist nützlich, um den Inhalt eines HTML-Elements abzurufen oder zu ersetzen.

Beispiel

Der folgende Code ruft das innerHTML des

-Elements mit id="intro" ab:

<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>

Ausgabeergebnis:

Im obigen Beispiel ist getElementById eine Methode und innerHTML ist ein Attribut.

Das innerHTML-Attribut kann verwendet werden, um jedes HTML-Element abzurufen oder zu ändern, einschließlich Beherrschen Sie die DOM-Attributmitglieder und den Dokumentenfluss vollständig

nodeName-Attribut

nodeName-Attribut gibt den Namen des Knotens an.

nodeName ist schreibgeschützt

Der nodeName des Elementknotens ist derselbe wie der Labelname

Der nodeName des Attributknotens ist derselbe wie der Attributname
Der nodeName des Textes node ist immer #text
des Dokumentknotens nodeName ist immer #document
Hinweis: nodeName enthält immer den Tag-Namen des HTML-Elements in Großbuchstaben.

nodeValue-Attribut gibt den Wert des Knotens an.

Der Knotenwert des Elementknotens ist undefiniert oder null.

Der Knotenwert des Textknotens ist der Text selbst.
Der Knotenwert des Attributknotens ist der Attributwert.
Den Wert abrufen des Elements

Ein Beispiel wäre: Rufen Sie den Textknotenwert des

-Tags ab:

Instanz

<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

Ausgabeergebnis:

nodeType-Attribut

Beherrschen Sie die DOM-Attributmitglieder und den Dokumentenfluss vollständig

nodeType Das Attribut gibt den Typ des Knotens zurück. nodeType ist schreibgeschützt.

Die wichtigeren Knotentypen sind:

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Das obige ist der detaillierte Inhalt vonBeherrschen Sie die DOM-Attributmitglieder und den Dokumentenfluss vollständig. 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：Zusammenfassung gängiger Methoden von Fensterobjekten in JavaScriptNächster Artikel：Zusammenfassung gängiger Methoden von Fensterobjekten in JavaScript

In Verbindung stehende Artikel

Mehr sehen