JavaScript & Node.js
JavaScript DOM
DOM Intro

DOM

DOM adalah sebuah API yang memungkinkan kita untuk mengubah struktur, style, dan konten dari halaman web. DOM adalah representasi dari halaman web yang dihasilkan oleh browser. DOM adalah sebuah pohon yang terdiri dari node-node. Node adalah representasi dari tag HTML. DOM memungkinkan kita untuk mengubah struktur, style, dan konten dari halaman web.

DOM Tree

DOM Tree adalah representasi dari halaman web yang dihasilkan oleh browser. DOM Tree terdiri dari node-node. Node adalah representasi dari tag HTML. DOM Tree terdiri dari 4 node yaitu:

  1. Document Node
  2. Element Node
  3. Text Node
  4. Attribute Node

Document Node

Document Node adalah node yang merepresentasikan keseluruhan halaman web. Document Node adalah node pertama yang ada di DOM Tree. Document Node adalah parent dari semua node yang ada di DOM Tree.

Element Node

Element Node adalah node yang merepresentasikan tag HTML. Element Node adalah child dari Document Node. Element Node adalah parent dari Text Node dan Attribute Node.

Text Node

Text Node adalah node yang merepresentasikan text yang ada di dalam tag HTML. Text Node adalah child dari Element Node.

Attribute Node

Attribute Node adalah node yang merepresentasikan attribute yang ada di dalam tag HTML. Attribute Node adalah child dari Element Node.

DOM API

DOM API adalah sekumpulan fungsi yang disediakan oleh DOM untuk mengubah struktur, style, dan konten dari halaman web. DOM API terdiri dari 3 bagian yaitu:

  1. DOM Selection
  2. DOM Manipulation
  3. DOM Traversal & DOM Manipulation

DOM Selection

DOM Selection adalah sekumpulan fungsi yang disediakan oleh DOM untuk memilih element HTML. DOM Selection terdiri dari 2 bagian yaitu:

  1. getElementById()
  2. getElementsByTagName()

getElementById()

getElementById() adalah sebuah fungsi yang digunakan untuk memilih element HTML berdasarkan id. Fungsi getElementById() menerima 1 parameter yaitu id dari element HTML yang ingin dipilih. Fungsi getElementById() mengembalikan nilai berupa element HTML yang dipilih.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Selection</title>
  </head>
  <body>
    <h1 id="judul">DOM Selection</h1>
    <p id="paragraf">Belajar DOM Selection</p>
    <script>
      const judul = document.getElementById("judul");
      console.log(judul);
    </script>
  </body>
</html>

getElementsByTagName()

getElementsByTagName() adalah sebuah fungsi yang digunakan untuk memilih element HTML berdasarkan tag. Fungsi getElementsByTagName() menerima 1 parameter yaitu tag dari element HTML yang ingin dipilih. Fungsi getElementsByTagName() mengembalikan nilai berupa HTMLCollection yang berisi element HTML yang dipilih.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Selection</title>
  </head>
  <body>
    <h1 id="judul">DOM Selection</h1>
    <p id="paragraf">Belajar DOM Selection</p>
    <script>
      const paragraf = document.getElementsByTagName("p");
      console.log(paragraf);
    </script>
  </body>
</html>

DOM Manipulation

DOM Manipulation adalah sekumpulan fungsi yang disediakan oleh DOM untuk mengubah konten dari halaman web. DOM Manipulation terdiri dari 2 bagian yaitu:

  1. innerHTML
  2. style

innerHTML

innerHTML adalah sebuah properti yang digunakan untuk mengubah konten dari element HTML. innerHTML menerima 1 parameter yaitu konten yang ingin ditambahkan ke dalam element HTML. innerHTML mengembalikan nilai berupa konten dari element HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Manipulation</title>
  </head>
  <body>
    <h1 id="judul">DOM Manipulation</h1>
    <p id="paragraf">Belajar DOM Manipulation</p>
    <script>
      const judul = document.getElementById("judul");
      judul.innerHTML = "Belajar DOM Manipulation";
    </script>
  </body>
</html>

style

style adalah sebuah properti yang digunakan untuk mengubah style dari element HTML. style menerima 1 parameter yaitu style yang ingin ditambahkan ke dalam element HTML. style mengembalikan nilai berupa style dari element HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Manipulation</title>
  </head>
  <body>
    <h1 id="judul">DOM Manipulation</h1>
    <p id="paragraf">Belajar DOM Manipulation</p>
    <script>
      const judul = document.getElementById("judul");
      judul.style.color = "red";
    </script>
  </body>
</html>

DOM Traversal & DOM Manipulation

DOM Traversal & DOM Manipulation adalah sekumpulan fungsi yang disediakan oleh DOM untuk mengubah struktur dari halaman web. DOM Traversal & DOM Manipulation terdiri dari 2 bagian yaitu:

  1. parentNode
  2. appendChild()

parentNode

parentNode adalah sebuah properti yang digunakan untuk memilih parent dari element HTML. parentNode tidak menerima parameter. parentNode mengembalikan nilai berupa parent dari element HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Traversal & DOM Manipulation</title>
  </head>
  <body>
    <h1 id="judul">DOM Traversal & DOM Manipulation</h1>
    <p id="paragraf">Belajar DOM Traversal & DOM Manipulation</p>
    <script>
      const paragraf = document.getElementById("paragraf");
      const judul = paragraf.parentNode;
      console.log(judul);
    </script>
  </body>
</html>
HTML & JavaScriptInput & Output