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.
Hasil Outputnya :
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
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
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
