Apa itu DOM di JavaScript? Mengenal DOM JavaScript|S1 Sistem Komputer S.Kom

Jl. Majapahit 605 Semarang , Jawa Tengah 50232

CALL CENTER 0-8888-9999-10 081-777-5758 08138-777-5758

stekom.ac.id
home
profil
Informasi
Galeri
Kontak
S1 SISTEM KOMPUTER (S.KOM)
STEKOM SEMARANG

Jl. Majapahit 605 Semarang , Jawa Tengah 50232

sistemkomputer@stekom.ac.id

Apa itu DOM di JavaScript? Mengenal DOM JavaScript

Rabu, 24 Mei 2023 16:10:44
1882
JAROT DIAN SUSATYONO S.Kom, M.Kom

Jika Anda sedang belajar JavaScript, maka Anda tahu bahwa JavaScript bisa menyulap halaman website jadi lebih dinamis dan menarik. Namun tahukah Anda, hal itu bisa terjadi lewat bantuan DOM. Tunggu dulu, apa itu DOM?

Singkatnya, DOM JavaScript adalah sesuatu yang bisa memanipulasi halaman web HTML. Di artikel ini, Anda akan belajar apa itu DOM JavaScript, fungsinya, sampai cara memanipulasi HTML lewat JavaScript DOM.

Penasaran kan? Langsung saja, ini dia penjelasan selengkapnya!

Apa itu DOM JavaScript?

DOM JavaScript adalah interface yang memungkinkan developer memanipulasi halaman web dari segi struktur, tampilan, dan kontennya. Nah, DOM adalah singkatan dari Document Object Model.

Awalnya, website tersusun dari HTML dan CSS style yang statis. Hingga akhirnya muncul JavaScript. JavaScript adalah bahasa pemrograman untuk menyulap website jadi lebih dinamis.

Lantas, bagaimana bahasa statis dan dinamis di atas saling berkomunikasi?

Ternyata, browser menciptakan dokumen yang dikenal sebagai DOM untuk setiap halaman web. Nah, DOM inilah yang memungkinkan JavaScript mengakses sekaligus memanipulasi semua elemen statis di halaman tersebut.

Anda penasaran seperti apa struktur DOM dari halaman website? Berikut kami sajikan script HTML dari halaman web sederhana:

Sementara ini dia hasil script tersebut setelah diolah menjadi DOM:

Bisa Anda lihat, HTML adalah elemen induk. Ia mempunyai dua elemen anakan yaitu Head dan Body. Begitu seterusnya hingga sampai elemen yang terkecil. Nantinya, setiap elemen dapat dimanipulasi oleh developer dengan bantuan JavaScript.

Nah, itu tadi sekilas tentang apa itu DOM JavaScript. Yuk mengenal fungsi JavaScript DOM di poin selanjutnya!

Fungsi DOM

Seperti yang dibahas di poin apa itu DOM, Anda tahu bahwa fungsi DOM JavaScript adalah untuk memanipulasi halaman website menjadi lebih dinamis. Bagaimana cara kerjanya?

Ternyata, DOM melakukannya dengan cara mengambil, mengubah, menambah, maupun menghapus elemen HTML. Hal ini akan dibahas lebih detail di bagian lain artikel.

Lebih jauh, ketika memanipulasi halaman, DOM juga mengumpulkan data, fungsi, dan atribut milik elemen yang diakses. Nah, properti tersebut dapat dipakai untuk tujuan lain.

Misalnya, untuk membuat API atau Application Programming Interface, serta mengambil data website dengan metode Web Scraping.

Sampai di sini, Anda sudah paham tentang pengertian dan fungsi DOM JavaScript. Yuk lanjut belajar cara memanipulasi elemen HTML dengan JavaScript DOM!

Cara Mengambil Elemen HTML

Untuk mengambil elemen HTML, DOM JavaScript menggunakan beberapa metode:

1. Mengambil Elemen dengan ID

Cara ini dilakukan melalui method getElementByID(). Berikut contoh scriptnya:

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

Dari situ, 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 getElementsByClassName(). Ini dia contoh scriptnya:

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

Bedanya, di sini, DOM JavaScript bisa mengambil tidak hanya satu, tapi semua elemen di bawah Class list-items.

3. Mengambil Elemen dengan Nama Tag

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

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

Nantinya, JavaScript DOM akan mengambil semua elemen dengan Tag li, untuk kemudian disimpan sebagai variabel.

4. Mengambil Elemen dengan querySelector

Tak hanya HTML, DOM JavaScript juga bisa Anda manfaatkan untuk mengambil elemen CSS. Caranya, dengan method querySelector. Berikut beberapa contoh scriptnya:

1. Mengambil elemen CSS dengan ID:

var header = document.querySelector(‘#footer)

2. Mengambil elemen CSS dengan Class:

var items = document.querySelector(‘.list-items’)

3. Mengambil elemen CSS dengan Tag:

var headings = document.querySelector(‘h2’);

4. Mengambil elemen CSS secara lebih spesifik:

document.querySelector(“h2.footer”);

5. Mengambil Elemen dengan querySelectorAll

querySelectorAll adalah alternatif method lain untuk mengambil elemen CSS. Method ini tak ada bedanya dengan method sebelumnya. Ini dia 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:

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

Atau, bisa juga digabungkan dengan method getElementsByTagName() seperti ini:

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

2. Mengubah Value dari Atribut

Tak hanya sekadar mengubah konten, DOM JavaScript juga bisa Anda pakai untuk mengganti value dari sebuah atribut. Contohnya seperti script di bawah:

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

Dengan begitu, JavaScript DOM akan mengubah value dari atribut img menjadi image.jpg.

3. Mengubah Style/Tampilan

JavaScript DOM ternyata juga berguna mengubah style elemen HTML maupun CSS. Namun untuk melakukannya, Anda perlu mengubah properti style terlebih dahulu seperti ini:

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

Baru setelahnya, Anda bisa mengambil elemen tertentu untuk kemudian diubah style-nya. Contohnya di sini, 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, loh. Begini caranya:

1. Cara 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 elemen tersebut dengan konten baru. Berikut contohnya:

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

2. Cara Menghapus Elemen

Sedangkan untuk menghapus elemen, Anda bisa memakai method removeChild(). Berikut 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-tama, Anda perlu membuat elemen baru seperti ini:

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

Kemudian, waktunya mengganti elemen di atas. Caranya dengan menulis script di bawah:

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

4. Menulis Elemen Langsung ke HTML Output Stream

Salah satu keunikan DOM JavaScript adalah kemampuannya untuk menggabungkan HTML dan JavaScript ke dalam satu baris kode. Nah, hal ini bisa dilakukan dengan method write() seperti di bawah:

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

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

document.write(Date());

Nah, itu dia panduan lengkap cara memanipulasi elemen memakai JavaScript DOM. Jangan beranjak dulu karena kami masih punya beberapa info penting!

Event Handlers

Selain untuk memanipulasi elemen HTML, DOM JavaScript juga bisa Anda manfaatkan untuk menangani Event (Event Handling). Singkatnya, Event adalah reaksi halaman website ketika pengguna melakukan sesuatu, misalnya mengklik sebuah tombol.

Nah, beberapa Event yang biasa ditemukan di website antara lain:

Klik kiri atau kanan mouse
Gerakan mouse
Transisi loading halaman
Perubahan atau transisi input form

1. Mensetup Event

Anda bisa mensetup Event menggunakan properti innerHTML seperti script berikut:

<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 mengatur Event Listener. Dengan begitu, halaman web akan merespons Event yang dilakukan pengguna. Nah, ini dia contoh scriptnya:

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

Ketika pengguna menjauhkan mouse dari tombol btn, maka halaman web secara otomatis akan merespons Event tersebut. Seperti apa bentuknya? Nah, hal ini bisa diatur lebih jauh sesuai kebutuhan si developer.

Node Relationship

Di bagian apa itu DOM, Anda tahu bahwa sebuah halaman web terdiri dari banyak elemen. Nah, elemen tersebut ternyata saling berhubungan satu sama lain. Itulah yang disebut dengan Node Relationship.

Node Relationship ini menghubungkan tiap-tiap elemen layaknya pohon keluarga, seperti:

parentNode – Elemen Induk.
childNodes – Elemen anakan.
firstChild – Elemen anakan pertama.
lastChild – Elemen anakan terakhir.
nextSibling – Elemen saudara.

Sebagai contoh, Anda bisa mendapatkan elemen induk dari heading dengan script di bawah:

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

Sudah Paham Apa itu DOM, kan?

Di artikel ini, Anda sudah memahami apa itu DOM JavaScript, fungsi DOM, cara memanipulasi elemen dengan JavaScript DOM, serta belajar tentang Event Handlers dan Node Relationship.

Mengingat fungsinya yang beragam, kami sarankan Anda belajar JavaScript DOM secara tekun. Bagaimana caranya? Pertama, tentu saja dengan mempraktikkan script DOM yang sudah kami sajikan, sekaligus memodifikasinya.

Kedua, tak ada salahnya mengupload website ber-script DOM tersebut ke hosting. Sehingga, Anda jadi punya gambaran seperti apa tampilan, struktur, dan konten website ketika diakses pengunjung.

Kembali Print