JavaScript/Pengenalan Model Objek Dokumen (DOM)
Model Objek Dokumen ataupun Document-Object Model, atau DOM, ialah alat JavaScript yang paling berguna. Dengan DOM, anda dapat bergerak dalam serta mengubah suai seluruh halaman web, daripada membuat tugas mudah seperti menambah unsur hinggalah mengatur semula beberpa bahagian laman tersebut.
Nod
suntingDOM meleraikan sesuatu dokumen kepada pepohon atau himpunan berhierarki nod. Misalnya, lihat cebisan HTML ini:
<div id="exampleDiv">Ini ialah <br>contoh cebisan HTML.</div>
Melalui DOM, JavaScript melihat ini sebagai cebisan yang mengandungi empat nod. Unsur div, bermula dengan tag pemula sehingga tag penamat, ialah satu nod. Div ini memiliki sifat yang diberikan kepadanya di dalam tag pemula. Sifat ini digelar "id" dan mempunyai nilai "exampleDiv".
Tiga lagi nod dalam contoh ini terletak di dalam div. Nod-nod ini dipanggil kod anak (child nodes) kepada div oleh sebab dirangkumi unsur div; dan disebabkan itu, div juga dikenali sebagai nod induk. Anak pertama div ialah nod teks, yang memiliki nilai "Ini ialah". Nod teks hanya mengandungi teks; nod ini tidak mengandungi tag dan kerana itu, ia berakhir di sini. Tag <br> ialah sebuah lagi nod, dan teks yang lain merupakan nod teks. Oleh sebab nod teks dan tag <br> berkongsi induk yang sama, nod-nod ini digelar nod saudara.
Contoh
sunting<html>
<head>
</head>
<body>
<p id="DOMEx"></p>
<div id="ContohDOM"></div>
<script type="text/javascript">
var div=document.getElementById("ContohDOM"); // Mencari div di atas
var p=document.getElementById("DOMEx"); // Mencari p di atas
p.appendChild(div);
</script>
</body>
</html>
Apa yang berlaku dalam contoh di atas seakan-akan kod berikut:
<html> <head> </head> <body> <p id="DOMEx"><div id="ContohDOM"></div></p> </body> </html>
Penerangan
suntingKod ini mengatur semula HTML, dan menggerakkan tag <div> daripada tag saudara <p> menjadi anaknya. Berikut cara ia bekerja:
Pertama, keuda-dua nod dijumpai melalui fungsi DOM, document.getElementById(). Nod ditugaskan (assign) kepada dua pemboleh ubah. Pemboleh ubah div mencari tag yang pertama yang mengandungi sifat ID ContohDOM. Pemboleh ubah p pula mencari tag yang pertama yang memiliki ID DOMEx, yang dalam contoh ini ialah tag <p>.
Kod p.appendChild() mengguna fungsi appendChild untuk meletakkan nilai div di bawah nod yang terkait dengan "p", sebagi anaknya yang terakhir. Dalam kata lain, ia meletakkan tag div ke dalam tag p.