konten HTML DOM Edit HTML
Melalui DOM HTML, JavaScript dapat mengakses dokumen HTML untuk setiap elemen.
Mengubah konten HTML
Cara termudah untuk mengubah isi dari elemen adalah dengan menggunakan properti innerHTML.
Contoh berikut perubahan <p> elemen dalam konten HTML:
contoh
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Coba »
gaya perubahan HTML
Melalui DOM HTML, Anda dapat mengakses objek objek gaya HTML.
Contoh berikut mengubah gaya HTML ayat:
contoh
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Coba »
Gunakan Event
HTML DOM memungkinkan Anda untuk mengeksekusi kode ketika suatu peristiwa terjadi.
Ketika elemen HTML "sesuatu yang terjadi", browser akan menghasilkan sebuah acara:
- Klik pada elemen
- loading halaman
- Ubah field input
Anda dapat mempelajari lebih lanjut tentang acara dalam bab berikutnya.
Berikut dua contoh untuk mengubah warna latar belakang <body> unsur dalam tombol diklik:
contoh
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Coba »
Dalam hal ini, fungsi melakukan kode yang sama:
contoh
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Coba »
Contoh berikut mengubah teks <p> elemen dalam tombol diklik:
contoh
<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>
Coba »