HTML

DOM

Agenda

Intro to DOM
Nyemplung DOM lebih Dalam
QnA
Waktunya Tantangan

Intro to DOM

DOM atau Document Object Model adalah cara untuk memanipulasi dokumen HTML secara JavaScript di dalam Browser kita

Intro to DOM (ii)

TL;DR Cara untuk manipulasi HTML secara JS di Browser kita
DOM merepresentasikan HTML secara pohon-pohon node (tree of nodes)
Di dalam DOM ada fungsi untuk menambah, menghapus, dan memodifikasi dokumen HTML secara efektif
DOM bersifat cross-platform dan language-independent dan bisa digunakan untuk memodifikasi dokumen HTML dan XML

Intro to DOM (iii)

Mari kita lihat contoh kode sebagai berikut

<html>
  <head>
    <title>Belajar DOM</title>
  </head>
  <body>
    <p>Paragraf 1</p>
    <a href="https://www.google.com">Google</a>
  </body>
</html>

Kira kira bagaimanakah struktur pohon node-nya?

Intro to DOM (iv)

Intro to DOM (v)

Mari kita coba bedah pohon nodenya

Pada pohon node yang dibuat, document adalah node teratas (root node)
root node memiliki sebuah anak, yaitu sebuah element dengan nama html (tag html), disebut dengan document element (element teratas yang mewakili document)
element html memiliki 2 anak, yaitu element head dan element body
element head memiliki sebuah anak, yaitu sebuah element dengan nama title, yang memilki text dengan nilai Belajar DOM
element body memiliki dua buah anak, yaitu element p dan element a
element p memiliki text dengan nilai Paragraf 1
element a memiliki text dengan nilai Google dan memiliki attribut href dengan nilai https://www.google.com

Nyemplung DOM lebih dalam

Setelah belajar tentang pohon node-nya, mari kita belajar tentang cara manipulasi node-nya !

JavaScript menyediakan banyak fungsi yang dapat digunakan untuk DOM:

Seleksi Element
Manipulasi Element
Main dengan Event
dan masih ada banyak lagi... namun yang kita fokuskan adalah yang di atas yah !

DOM - Seleksi Element

Ada banyak sekali fungsi yang bisa digunakan untuk seleksi element, namun yang akan kita fokuskan adalah:

getElementById(), untuk memilih elemen berdasarkan id yang di-input
querySelector(), untuk memilih elemen berdasarkan selector CSS-nya (Hanya satu)
querySelectorAll(), untuk memilih elemen berdasarkan selector CSS-nya (Bisa banyak, dalam bentuk array)

DOM - Seleksi Element (ii)

Misalkan kita punya struktur HTML sebagai berikut

<html>
  <head>
    <title>Belajar DOM</title>
  </head>
  <body>
    <div id="app">
      <h1 id="headingPertama">Halo ini adalah heading 1</h1>
      <h2 class="heading-2">Halo ini adalah heading 2 dengan class</h2>
      <h3>Halo ini adalah heading 3 yang pertama</h3>
      <h3>Halo ini adalah heading 3 yang kedua</h3>
    </div>
  </body>
</html>

Mari kita lihat contoh untuk memilih element DOM, klik di sini

DOM - Manipulasi Element

Nah, setelah selesai belajar untuk memilih, sekarang kita bisa belajar untuk memanipulasi

Manipulasi di sini bukan berarti kita memengaruhi orang lain loh yah

Namun lebih ke memodifikasi / mengubah isi (text), nilai, ataupun attribut element yang sudah / akan ada

DOM - Manipulasi Element (ii)

Ada banyak sekali fungsi yang bisa digunakan untuk manipulasi element, namun yang akan kita fokuskan adalah:

createElement(), untuk membuat sebuah elemen baru
appendChild(), untuk menambahkan anakan ke dalam suatu node yang akan dijadikan orang tua
append(), untuk menambahkan sebuah node di akhir sebuah node yang dianggap orang tua
innerHTML, untuk mendapatkan dan meng-set konten dari elemen html yang terpilih

DOM - Manipulasi Element (iii)

Nah, sudah cukup panas yah mesinnya !

Mari kita coba membuat kodenya yah, klik di sini

Setelah selesai mempelajari manipulasi elemen, mari kita masuk materi selanjutnya: Main dengan event

DOM - Main dengan Event

Event, adalah sebuah aksi yang terjadi di dalam browser, yang membuat aplikasi terasa lebih hidup dan interaktif

Contoh dari event

Sebuah button yang bisa di-click dan akan menampilkan dialog box
Membaca tombol yang sedang ditekan oleh user (misalnya tombol panah), kemudian memberikan respon dari tombol yang ditekan
dan lain lainnya ...

Nah pertanyaannya adalah:

Bagaimana cara kita membuat dan menggunakannya?

DOM - Main dengan Event (ii)

Cara untuk mendeklarasikan event ada 2:

Secara HTML - menggunakan on[namaevent] pada element, contoh: onclick="namaFungsi"
Secara JS - menggunakan element.addEventListener(namaEvent, namaFungsi)

Loh kok ada fungsi lagi?

Ya ! karena di dalam deklarasi event, kita tidak bisa lari dari fungsi yang akan dibuat

Tapi eventnya yang ada itu apa aja yah?

DOM - Main dengan Event (iii)

Contoh event dalam javascript

click
keypress

Dan masih ada event lainnya lagi (namun tidak kita bahas di sini yah !)

hover
submit
blur

DOM - Main dengan Event (iv)

Yuk tanpa bak bik buk lagi, mari kita lihat contoh kodenya, klik di sini

Wah kodenya panjang yah

Memang beginilah cara untuk melakukan DOM dengan javascript yah, panjang dan (cukup) menantang !