HTML DOM - Ubah suai kandungan HTML


Melalui HTML DOM, JavaScript boleh mengakses setiap elemen dalam dokumen HTML.

Menukar kandungan HTML

Cara paling mudah untuk menukar kandungan elemen ialah menggunakan sifat innerHTML.

Contoh berikut mengubah kandungan HTML elemen <p> »

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Tukar gaya HTML
Melalui HTML DOM, anda boleh mengakses gaya objek objek HTML.

Contoh berikut menukar gaya HTML perenggan:

Contoh

<html><!DOCTYPE html>
<html>
<body>

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

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

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan Contoh" untuk melihat tika dalam talian

Menggunakan Acara
HTML DOM membolehkan anda melaksanakan kod apabila peristiwa berlaku.

Apabila "sesuatu berlaku" pada elemen HTML, penyemak imbas menjana acara:

Klik pada elemen

Muatkan halaman

  • Tukar medan input

  • Anda boleh mengetahui lebih lanjut tentang acara dalam bab seterusnya.

    • Dua contoh berikut menukar warna latar belakang elemen <body> apabila butang diklik:

  • Contoh
<html><!DOCTYPE html>
<html>
<body>

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dalam contoh ini, kod yang sama dilaksanakan oleh fungsi:

Instance 

<html><!DOCTYPE html>
<html>
<body>

<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="Change background color">

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh berikut berlaku apabila butang diklik Apabila menukar teks elemen <p> Contoh»

Klik Butang "Jalankan Contoh" untuk melihat contoh dalam talian

←
→