HTML-DOM HTML bearbeiten Inhalt
Durch das HTML-DOM kann JavaScript Zugriff auf das HTML-Dokument für jedes Element.
Ändern Sie den HTML-Inhalt
Der einfachste Weg, um den Inhalt des Elements zu ändern, ist die Innerhtml Eigenschaft zu verwenden.
Das folgende Beispiel ändert <p> Element in HTML-Inhalt:
Beispiele
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Versuchen »
Ändern von HTML-Styles
Durch die HTML-DOM, können Sie das Objekt Objekt HTML-Stil zugreifen.
Im folgenden Beispiel wird die HTML-Absatzformate:
Beispiele
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Versuchen »
Verwenden Sie die Ereignis
HTML-DOM ermöglicht es Ihnen, Code auszuführen, wenn ein Ereignis eintritt.
Wenn das HTML-Element "etwas passiert", wird der Browser ein Ereignis generieren:
- Klicken Sie auf ein Element
- Laden Seite
- Ändern Sie das Eingabefeld
Sie können mehr über die Veranstaltung im nächsten Kapitel lernen.
Die folgenden zwei Beispiele, die die Hintergrundfarbe zu ändern <body> -Element in der Schaltfläche geklickt haben:
Beispiele
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Versuchen »
In diesem Fall führt die Funktion den gleichen Code:
Beispiele
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Versuchen »
Im folgenden Beispiel wird der Text <p> -Element in der Schaltfläche geklickt wird:
Beispiele
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
Versuchen »