Ausführliche Erläuterung der grundlegenden Möglichkeiten zur Bedienung von HTML DOM mit JavaScript

Ausführliche Erläuterung der grundlegenden Möglichkeiten zur Bedienung von HTML DOM mit JavaScript_Grundkenntnissen

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:35:57

Original

1208 Leute haben es durchsucht

Das HTML-DOM bietet Zugriff auf alle Elemente eines JavaScript-HTML-Dokuments.
HTML DOM (Document Object Model)
Wenn eine Webseite geladen wird, erstellt der Browser das Dokumentobjektmodell der Seite.
Das HTML-DOM-Modell ist als Baum von Objekten aufgebaut:
Ausführliche Erläuterung der grundlegenden Möglichkeiten zur Bedienung von HTML DOM mit JavaScript_Grundkenntnissen
Durch das programmierbare Objektmodell erlangte JavaScript ausreichend Leistungsfähigkeit, um dynamisches HTML zu erstellen.

JavaScript kann alle HTML-Elemente auf der Seite ändern
JavaScript kann alle HTML-Attribute auf der Seite ändern
JavaScript kann alle CSS-Stile auf der Seite ändern
JavaScript kann auf alle Ereignisse auf der Seite reagieren

HTML-Element suchen
Normalerweise müssen Sie mit JavaScript HTML-Elemente manipulieren.
Dazu müssen Sie zunächst das Element finden. Dafür gibt es drei Möglichkeiten:

HTML-Element anhand der ID suchen
HTML-Element nach Tag-Namen suchen
HTML-Elemente nach Klassennamen suchen
HTML-Element anhand der ID suchen

Der einfachste Weg, ein HTML-Element im DOM zu finden, ist die Verwendung der ID des Elements.
In diesem Beispiel wird das Element mit der ID="intro" gefunden:
Beispiel

var x=document.getElementById("intro");

Nach dem Login kopieren

Wenn das Element gefunden wird, gibt die Methode das Element als Objekt (in x) zurück.
Wenn das Element nicht gefunden wird, enthält x null.
HTML-Elemente nach Tag-Namen suchen
Dieses Beispiel findet das Element mit id="main" und dann alle

-Elemente innerhalb des id="main"-Elements:
Beispiel

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

Nach dem Login kopieren

HTML-Element nach Klassennamen suchen
In diesem Beispiel wird die Funktion getElementsByClassName verwendet, um Elemente mit class="intro":
zu finden Beispiel

var x=document.getElementsByClassName("intro");

Nach dem Login kopieren

HTML ändern
Das HTML-DOM ermöglicht es JavaScript, den Inhalt von HTML-Elementen zu ändern.
HTML-Ausgabestream ändern
JavaScript kann dynamische HTML-Inhalte erstellen:
Das heutige Datum ist: Mittwoch, 21. Oktober 2015, 14:43:25 Uhr GMT 0800 (China Standard Time)
In JavaScript kann document.write() verwendet werden, um Inhalte direkt in den HTML-Ausgabestream zu schreiben.
Beispiel

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Nach dem Login kopieren

Lampe Verwenden Sie document.write() niemals, nachdem das Dokument vollständig geladen wurde. Dadurch wird das Dokument überschrieben.

HTML-Inhalt ändern
Der einfachste Weg, HTML-Inhalte zu ändern, ist die Verwendung der innerHTML-Eigenschaft.
Um den Inhalt eines HTML-Elements zu ändern, verwenden Sie diese Syntax:
document.getElementById(id).innerHTML=new HTML
Dieses Beispiel ändert den Inhalt des

-Elements:
Beispiel

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

Nach dem Login kopieren

Dieses Beispiel ändert den Inhalt des

-Elements:
Beispiel

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

Nach dem Login kopieren

Erklärung mit Beispielen:

Das obige HTML-Dokument enthält das
-Element mit der ID="header"
Wir verwenden HTML DOM, um das Element mit der ID="header" abzurufen
JavaScript ändert den Inhalt dieses Elements (innerHTML)

HTML-Attribute ändern
Um die Attribute eines HTML-Elements zu ändern, verwenden Sie diese Syntax:

document.getElementById(id).attribute=new value

Nach dem Login kopieren

Dieses Beispiel ändert das src-Attribut des Ausführliche Erläuterung der grundlegenden Möglichkeiten zur Bedienung von HTML DOM mit JavaScript_Grundkenntnissen -Elements:
Beispiel

<!DOCTYPE html>
<html>
<body>

<img  id="image" src="smiley.gif" alt="Ausführliche Erläuterung der grundlegenden Möglichkeiten zur Bedienung von HTML DOM mit JavaScript_Grundkenntnissen" >

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

Nach dem Login kopieren

Erklärung mit Beispielen:

Das obige HTML-Dokument enthält ein -Element mit der ID="image"
Wir verwenden HTML DOM, um das Element mit der ID="image" abzurufen
JavaScript ändert die Attribute dieses Elements (ändern Sie „smiley.gif“ in „landscape.jpg“)

Ausführliche Erläuterung der grundlegenden Möglichkeiten zur Bedienung von HTML DOM mit JavaScript_Grundkenntnissen

-Element mit der ID="header"