2 min to read

DOM - Intro

Pengenalan DOM (Document Object Model)

Featured image

DOM (Document Object Model) merupakan kemampuan javascript untuk memanipulasi element pada sebuah halaman website agar lebih menarik dan interaktif.

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.. - Mozilla

KOMPONEN DOM

DOM memiliki beberapa komponen yang dapat dimanipulasi

DOM TREE

DOM TREE merupakan representasi tampilan sebuah website dalam bentuk pohon (tree), sebagai contoh, saya memiliki source code tampilan website seperti gambar berikut:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM INTRO</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
    <div>
      <p>paragraf 3</p>
    </div>
    <a href="halaman2.html">Ke halaman 2</a>
  </body>
  </html>

Maka representasi DOM Tree dari tampilan diatas adalah seperti ini.

DOM TREE

NODE, NODE-LIST, HTMLCollection

Seperti yang sudah dijelaskan pada pengertian DOM bahwa DOM dapat memilih dan memanipulasi sebuah element pada tampilan website. Pemilihan element tersebut terbagi menjadi 3 jenis yaitu NODE, NODE-LIST dan HTMLCollection

NODE

Setiap element pada struktur dokumen di html disebut dengan Node. Setiap node memiliki tipe tipe tertentu diantaranya:

node

Pada ilustrasi diatas dijelaskan bahwa kita akan memilih node “<p>” dengan tipe node element untuk dimanipulasi menggunakan DOM.

NODE-LIST

Node-List merupakan sebuah kondisi ketika kita memilih lebih dari 1 node, node-list ini tidak mengenal tipe node apa yang dipilih. Jadi ketika kita memilihi lebih dari 1 node dengan tipe node apapun maka itu disebut Node-List.

node list

Pada ilustrasi diatas kita memilih beberapa node dengan tipe node element dan Text.

HTMLCollection

HTMLCollection adalah kumpulan node yang dipilih, namun node yang dipilih hanya node yang memiliki tipe node element saja.

htmlcollection

Pada ilustrasi diatas kita memilih 3 node dengan tipe node element untuk dimanipulasi.

Node-list dan HTMLCollection keduanya merupakan kumpulan node. Node-List dapat berisi node dengan tipe node apapun namun HTMLCollection hanya menerima node yang memiliki tipe node element.