Dalam tutorial ini, kita akan belajar tentang Document Object Model dalam JavaScript.
Apa itu Document Object Model (DOM)
Document Object Model (DOM) adalah antarmuka pemrograman aplikasi (API) untuk memanipulasi dokumen HTML.
DOM mewakili dokumen HTML sebagai pohon nodes. DOM menyediakan fungsi yang memungkinkan Anda menambah, menghapus, dan memodifikasi bagian dokumen secara efektif.
Perhatikan bahwa DOM adalah cara lintas platform dan bebas bahasa untuk memanipulasi dokumen HTML dan XML.
Sebuah dokumen sebagai hirarki node
DOM mewakili dokumen HTML sebagai hierarki node. Perhatikan dokumen HTML berikut :
<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
<p>Hello DOM!</p>
</body>
</html>Pohon berikut mewakili dokumen HTML di atas:
Di pohon DOM ini, document adalah simpul akar (root). Simpul akar memiliki satu simpul anak yang merupakan elemen <html>. Elemen <html> disebut elemen dokumen.
Setiap dokumen hanya dapat memiliki satu elemen dokumen. Dalam dokumen HTML, elemen dokumen adalah elemen <html>. Setiap markup dapat diwakili oleh sebuah simpul di pohon.
Jenis Node
Setiap simpul di pohon DOM diidentifikasi oleh jenis simpul. JavaScript menggunakan bilangan bulat untuk menentukan jenis node. Tabel berikut mengilustrasikan konstanta tipe node :
| Konstanta | Nilai | Deskripsi |
| Node.ELEMENT_NODE | 1 | Node Elemen seperti <p> atau <div> |
| Node.TEXT_NODE | 3 | Teks sebenarnya di dalam Elemen atau Attr |
| Node.CDATA_SECTION_NODE | 4 | Bagian CDATA, seperti <!CDATA[[ … ]]>. |
| Node.PROCESSING_INSTRUCTION_NODE | 7 | Instruksi Pemrosesan dokumen XML, seperti <?xml-stylesheet … ?> |
| Node.COMMENT_NODE | 8 | Node Komentar, seperti <!– … –> |
| Node.DOCUMENT_NODE | 9 | Node Dokumen |
| Node.DOCUMENT_TYPE_NODE | 10 | Node DocumentType, seperti <!DOCTYPE html> |
| Node.DOCUMENT_FRAGMENT_NODE | 11 | Node DocumentFragment |
Untuk menuliskan tipe node, Anda menggunakan properti nodeType :
node.nodeTypeAnda dapat membandingkan properti nodeType dengan konstanta di atas untuk menentukan tipe node. Sebagai contoh :
if (node.nodeType == Node.ELEMENT_NODE) {
// node is the element node
}Properti nodeName dan nodeValue
Node memiliki dua properti penting: nodeName dan nodeValue yang menyediakan informasi khusus tentang node.
Nilai properti ini tergantung pada jenis node. Misalnya, jika tipe node adalah node elemen, nodeName selalu sama dengan nama tag elemen dan nodeValue selalu null.
Untuk alasan ini, sebaiknya uji jenis node sebelum menggunakan properti berikut :
if (node.nodeType == Node.ELEMENT_NODE) {
let name = node.nodeName; // tag name like <p>
}Node dan Elemen
Terkadang kita bingung antara Node dan Elemen.
Node adalah nama umum dari objek apa pun di pohon DOM. Itu bisa berupa elemen DOM bawaan seperti dokumen. Atau bisa berupa tag HTML apa pun yang ditentukan dalam dokumen HTML seperti <div> atau <p>.
Elemen adalah simpul dengan jenis simpul tertentu Node.ELEMENT_NODE, yang sama dengan 1.
Dengan kata lain, node adalah jenis elemen generik. Elemennya adalah tipe node tertentu dengan tipe node Node.ELEMENT_NODE.
Gambar berikut mengilustrasikan hubungan antara tipe Node dan Element :
Perhatikan bahwa getElementById() dan querySelector() mengembalikan objek dengan tipe Elemen sementara getElementsByTagName() atau querySelectorAll() mengembalikan NodeList yang merupakan kumpulan node.
Hubungan Node
Node apa pun memiliki hubungan dengan node lain di pohon DOM. Hubungannya sama dengan yang dijelaskan dalam silsilah keluarga dalam kehidupan sehari-hari.
Misalnya, <body> adalah simpul anak dari simpul <html>, dan <html> adalah induk dari simpul <body>.
Node <body> adalah saudara dari node <head> karena mereka berbagi induk langsung yang sama, yaitu elemen <html>.
Gambar berikut mengilustrasikan hubungan antar node :
Kesimpulan
- Dokumen HTML atau XML dapat direpresentasikan sebagai pohon simpul, seperti pohon keluarga tradisional.
- Setiap markup dapat direpresentasikan sebagai node dengan tipe node tertentu.
- Elemen adalah jenis simpul tertentu dengan jenis simpul Node.ELEMENT_NODE.
- Di pohon DOM, sebuah simpul memiliki hubungan dengan simpul lainnya.
Itu dia penjelasan tentang apa itu Document Object Model atau DOM di JavaScript.
0 Komentar