Apa itu DOM di JavaScript? Mengenal DOM JavaScript

Apabila anda sedang belajar JavaScript, Maka anda tahu baha JavaScript membuat halaman website menjadi dinamis dan menarik. Tahukah anda, Hal itu bisa terjadi melalui bantuan DOM. Lalu Apa itu DOM ?

DOM JavaScript adalah sesuatu untuk memanipulasi halaman web HTML. Di artikel kali ini, Anda akan belajar apa itu DOM JavaScript, Fungsinya, Hingga cara memanipulasi HTML lewat JavaScript DOM.

Apa Itu DOM JavaScript ?

DOm JavaScript adalah Interface yang memungkinkan developer memanipulasi halaman web dari segi terstuktur, tampilan dan kontennya. DOM adalah singkatan dari Document Object Model. Website tersusun dari HTML dan CSS Style yang statis. Hingga akhirnya muncul JavaScript. JavaScript adalah bahasa pemrograman untuk menyulap website jadi lebih dinamis.

Lalu bagaimana bahasa statis dan dinamis diatas saling berkomunikasi ?

Browser menciptakan dokumen yang dikenal sebagai DOM untuk setiap halaman website. DOM memungkinkan JavaScript untuk mengakses sekaligus memanipulasi semua elemen statis di halaman tersebut.

Anda penasaran seperti apa struktur DOM di Halaman Website ? Berikut ini kami coba sajikan script HTML dalam web sederhana.

struktur DOM

Hasil Outputnya :

Apa itu DOM di JavaScript? Mengenal DOM JavaScript

Bisa dilihat bahwa HTML merupakan elemen induknya. Ia mempunyai dua elemen anakan yaitu Head dan Body. Begitu seterusnya hingga sampai elemen yang terkecil. Nantinya setiap elemen dapat dimanupulasikan oleh developer dengan bantuan JavaScript.

Fungsi Apa Itu DOM

DOM JavaScript memiliki fungsi untuk memanipulasi halaman website lebih dinamis. Lalu Bagaimana Cara kerjanya ? Ternyata DOM melakukannya dengan cara mengambil, megubah, menambah maupun menghapus elemnt HTML.

Ketika memanipulasi halaman, DOM juga mengumpulkan data, fungsi, dan atribut miliki elemen yang diakses. Misalnya untuk membuat API atau Application Programming Interface serta mengambil data website dengan metode Web Scraping.

Baca Juga : Belajar Full Stack Web Developer Bersama Course-Net Indonesia

Cara Mengambil Elemen HTML

Untuk mengambil elemen HTML , DOM JavaScript menggunakan beberapa metode yang dilakukan.

1. Mengambil Elemen Dengan ID

Cara ini dilakukan dengan melalui method getElementByID() , Berikut ini adalah contohnya.

var title = document.getElementById(footer-title’);

JavaScript DOM dapat mengambil elemen dengan ID footer-title lalu menyimpannya ke dalam sebuah variabel.

2. Mengambil Elemen Dengan Class

Anda bisa mendapatkan elemen dengan method getElementByClassName() . Ini dia contohnya seperti ini :

var items = document.getElementsByClassName(‘list-items’);

Bedanya disini , DOM JavaScript bisa mengambil hanya satu, Tapi semua element dibawah class list-items.

3. Mengambil Elemen Dengan Nama Tag

Anda juga bisa mendapatkan lebih dari satu elemen dengan method getElementsByTagName() . Contohnya seperti dibawah ini.

var listItems = document.getElementsByTagName(‘li’);

JavaScript DOM akan mengambil semua elem dengan tag li, Untuk kemudian disimpan menjadi variabel.

4. Mengambil Elemen Dengan querySelector

Tah hanya HTML, DOM JavaScript juga bisa anda manfaatkan untuk mengambil elemen CSS. Caranya dengan method querySelector. Berikut ini adalah contoh scriptnya :

  • Mengambil elemen CSS dengan ID :
    var header = document.querySelector(‘#footer)
  • Mengambil Elemen CSS dengan Class
    var items = document.querySelector(‘.list-items’)
  • Mengambil Elemen CSS dengan Tag
    var headings = document.querySelector(‘h2’);
  • Mengambil Elemen CSS dengan lebih Spesifik
    document.querySelector(“h2.footer”);

5. Mengambil Elemen Dengan querySelectorAll

querySelectorAll adalah alternatif method lain untuk mengambil elemen CSS. Mathod ini tak ada bedanya dengan method sebelumnya. Ini adalah contohnya :

var heading = document.querySelectorAll(‘h1.heading’);

Cara Mengubah Elemen HTML

JavaScript DOM memungkinkan anda mengubah struktur, Isi konten dan tampilan elemen HTML dengan beberapa metode berikut

1. Mengubah Konten HTML

Anda bisa mengubah konten HTML menggunakan properti innerHTML. Nah properti ini dapat dikombinasikan dengan method getElementbyID() seperti berikut ini.

document.getElementById(“#header”).innerHTML = “Hello World!”;

Atau bisa digabungkan dengan method getElementsByTagName() seperti ini :

document.getElementsByTagName("div").innerHTML = "<h2>Hello World!</h2>"

2. Mengubah Value Dari Atribut

Tak hanya sekedar merubah konten, DOM JavaScript bisa anda paki untuk mengganti value dari sebuah atribut. Contohnya seperti script dibawah ini :

document.getElementsByTag(“img”).src = “image.jpg”;

Dengan begitu JavaScript DOM akan mengubah Value dari atribut imh menjadi image.jpg

3. Mengubah Style / Tampilan

JavaScript DOM ternyata berguna untuk mengubah tampilan Style HTML maupun CSS, Dalam melakukannya anda perlu mengubah properti style terlebih dahulu seperti dibawah ini :

document.getElementById(id).style.property = new style

Setelah itu anda bisa mengambil elemen tertentu untuk kemudian diubah style-nya. Contohnya disini kami mengubah style dari borderBottom:

document.getElementsByTag(“h2”).style.borderBottom = “solid 5px #FFF”;

Cara Menambah Dan Menghapus Elemen HTML

Selain untuk keperluan mengambil dan mengubah elemen HTML, DOM JavaScript juga bisa anda pakai untuk menambah dan menghapus elemen, Begini caranya.

1. Menambah Elemen

Untuk menambahkan elemen baru , Anda cukup menggunakan method createElement() seperti ini:

var div = document.createElement(‘div’);

Dari situ JavaScript DOM akan membuat sebuah elemen bernama div. Setelahnya anda bisa mengisi element tersebut dengan konten baru seperti ini:

var newContent = document.createTextNode("Hello World!");
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

2. Cara Menghapus Elemen

Sedangkan untuk menghapus elemet, Anda bisa menggunakan method removeChild(). berikut ini adalah contohnya :

var elem = document.querySelector('#footer);
elem.parentNode.removeChild(elem);

3. Cara Mengganti Elemen

DOM JavaScript juga memungkinkan anda mengganti elemen yang sudah ada. Pertama anda perlu membuat elemen baru seperti dibawah ini.

var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);

Kemudian , Waktunya mengganti elemen diatas. Caranya dengan menulis Script di bawah ini :

newDiv.innerHTML = "Hello World2";
div.parentNode.replaceChild(newDiv, div);

4. Menulis Elemen Langsung ke HTML Output Stream

Salah satu keunikan dari DOM JavaScript adalah kemampuannya untuk menggabungkan HTML JavaScript ke dalam satu baris kode. Anda bisa menggunakan method write() , Seperti dibawah ini :

document.write(“<h2>Hello World!</h2><p>This is an example text!</p>”);

Selain dapat berisi teks diatas , method write() juga bisa dipakai untuk menginput object contohnya seperti Date dibawah ini :

document.write(Date());

Itulah Panduan memanupulasi elemen memakai JavaScript DOM. Selain itu juga ada Event Handlers yang akan kami bahas.

Event Handlers

Event Handlers

Selain untuk memanipulasi elemen HTML, DOM JavaScript juga bisa memanfaatkan untuk menangani Event (Event Handling). Singkatnya Event adalah reaksi halaman website ketika pengguna melakukan sesuatu. Berikut ini beberapa Event yang bisa ditemukan di website antara lain :

  • Klik Kiri Atau Klik Kanan Mouse
  • Gerakan Mouse
  • Transisi Loading Halaman
  • Perubahan Atau Transisi Input Form

1. Mensetup Event

Anda bisa mensetup Event menggunakan properti innerHTML seperti berikut ini :

<button onclick=”this.innerHTML = Thank you!’”>Please click!!</button>

Apabila pengguna mengklik button Please Click!, Maka button tersebut akan memunculkan pesan Thank You.

2. Mengatur Event Listener

JavaScript DOM juga memungkinkan anda untuk mengatur Event Listener. Dengan begitu halaman web akan merespon Event yang dilakukan pengguna. Nah ini dia contohnya :

document.getElementById(“btn”).addEventListener('mouseover', runEvent);

Ketika pengguna menjauhkan mouse dari btn, maka halaman web secara otomatis merespon Event tersebut.

Node Relationship

Node Relationship

Dibagian ini DOM , Anda tahu bahwa sebuah halaman web terdiri dari banyak elemen. Elemen ini saling terhubung satu sama lain. Node Relationship ini menghubungkan tiap tiap elemen layaknya struktur keluarga seperti :

  • parentNodes – Elemen Induk
  • childNodes – Elemen Anakan
  • firstChild – Elemen Anak pertama
  • lastChild – Elemen Anak Terakhir
  • nextSibling – Elemen Saudara.

Sebagai contohnya elemen induk dari heading dengan script dibawah ini :

var parent = document.getElementById(“heading”).parentNode

Sudah Paham Dengan DOM JavaScript ? Mau Lebih Jelasnya Bisa Ikut Kursus Di Course-Net

Demikianlah artikel apa itu DOM JavaScript , Fungsi DOM dan cara memanipulasi elemen dengan JavaScript DOM. Serta anda juga belajar tentang Event Handlers dan Node Relationship. Untuk belajar lebih lengkapnya anda bisa mengikuti beberapa kursus yang tersedia di Course-Net seperti Kursus Full Stack Developer, Kursus Laravel , Kursus Golang Dan lainnya yang tersedia yang bisa anda akses di www.Course-Net.com

Share This Post

Related Posts

0
0

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Thanks for submitting your rating!
    Please give a rating.

    Thanks for submitting your comment!
    promo end of year

    Artikel Rekomendasi