Treść HTML DOM Edycja HTML
Poprzez DOM HTML, JavaScript może uzyskać dostęp do dokumentu HTML dla każdego elementu.
Zmień zawartość HTML
Najprostszym sposobem, aby zmienić zawartość elementu jest wykorzystanie właściwości innerHTML.
Poniższy przykład zmienia <p> w zawartości HTML:
Przykłady
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Spróbuj »
Zmień styl HTML
Poprzez DOM HTML, można uzyskać dostęp do obiektu obiektu HTML stylu.
Poniższy przykład zmienia style HTML akapitu:
Przykłady
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Spróbuj »
wykorzystanie zdarzeń
HTML DOM pozwala na wykonanie kodu w przypadku wystąpienia zdarzenia.
Gdy element HTML "coś się dzieje", przeglądarka wygeneruje zdarzenie:
- Kliknij na element
- Ładowanie strony
- Zmień pole wprowadzania
Możesz dowiedzieć się więcej o tym wydarzeniu w następnym rozdziale.
Poniższe dwa przykłady, aby zmienić kolor tła <body> element kliknięciu przycisku:
Przykłady
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Spróbuj »
W tym przypadku, funkcja wykonuje ten sam kod:
Przykłady
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Spróbuj »
Poniższy przykład zmienia element tekstowy <p> W kliknięciu przycisku:
Przykłady
<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>
Spróbuj »