DOM (Document Object Model) adalah metode di JavaScript untuk menyeleksi dan memanipulasi elemen HTML. Dalam materi kali ini kita akan membahas mengenai DOM Selection dan DOM Manipulation.
DOM Selection digunakan untuk menyeleksi elemen HTML. Ada beberapa cara di JavaScript untuk menyeleksi dokumen.
document.getElementById()
document.getElementById() digunakan untuk menyeleksi dokumen HTML berdasarkan id.
Contoh:
Pada kode di atas JavaScript menyeleksi elemen berdasarkan id ‘card’.
document.getElementsByClassName()
document.getElementsByClassName() digunakan untuk menyeleksi dokumen HTML berdasarkan kelas.
Contoh:
Pada kode di atas JavaScript menyeleksi elemen berdasarkan kelas ‘card’.
document.getElementsByTagName()
document.getElementsyTagName() digunakan untuk menyeleksi dokumen HTML berdasarkan tag HTML.
Contoh:
Pada kode di atas JavaScript menyeleksi elemen berdasarkan tag div.
document.querySelector
document.querySelector() digunakan untuk menyeleksi elemen pertama pada HTML.
Contoh:
document.querySelectorAll
document.querySelectorAll() digunakan untuk menyeleksi semua elemen yang cocok berdasarkan selektor yang diberikan.
Contoh:
DOM Manipulation digunakan untuk memanipulasi elemen HTML. Ada beberapa cara di JavaScript untuk memanipulasi dokumen HTML.
element.innerHTML
element.innerHTML digunakan untuk menambahkan lalu menimpa konten HTML baru ke dalam elemen.
Contoh:
Pada kode di atas JavaScript menangkap elemen pertama menggunakan indeks ke-[0] dengan kelas ‘card’. Setelah itu, isi elemen di tambahkan dengan metode innerHTML.
element.style
element.style adalah metode untuk melakukan styling elemen menggunakan JavaScript.
Contoh:
Title
Card description here...
Pada kode di atas JavaScript menangkap elemen HTML dengan id ‘card’. Lalu, elemen dengan id ‘card’ di hilangkan dengan metode element.style.display = ‘none’;
setAttribute
setAttribute() adalah metode dalam JavaScript yang digunakan untuk menetapkan atau memperbarui nilai atribut pada elemen HTML. Atribut HTML adalah nilai-nilai yang dapat diterapkan pada elemen seperti id, class, src, href, alt, dll.
Dengan setAttribute(), kita bisa menambahkan atau memodifikasi atribut elemen melalui JavaScript.
Contoh:
Title
Card description here...
element.classList
element.classList adalah properti dalam JavaScript yang memberikan cara yang lebih mudah untuk mengelola daftar kelas (class) pada elemen HTML. Dengan menggunakan classList, kita dapat menambahkan, menghapus, memeriksa, atau mengganti kelas pada elemen dengan cara yang lebih efisien dan intuitif dibandingkan dengan menggunakan setAttribute untuk memanipulasi atribut class secara langsung.
Berikut adalah beberapa metode umum yang tersedia melalui element.classList:
add(className): Menambahkan satu atau lebih kelas ke elemen. Jika kelas sudah ada, maka tidak akan ditambahkan lagi (tidak ada duplikasi).
element.classList.add('className1', 'className2');
remove(className): Menghapus satu atau lebih kelas dari elemen. Jika kelas yang ingin dihapus tidak ada, maka tidak ada perubahan yang dilakukan.
element.classList.remove('className1', 'className2');
toggle(className): Menambahkan kelas jika kelas tersebut belum ada, atau menghapusnya jika sudah ada. Sangat berguna untuk membuat elemen bergantian antara dua keadaan (misalnya, menampilkan dan menyembunyikan elemen).
element.classList.toggle('className');
Metode ini juga bisa menerima argumen boolean kedua yang menentukan apakah kelas harus ditambahkan (true) atau dihapus (false).
element.classList.toggle('className', true); // Memastikan kelas 'className' ada
element.classList.toggle('className', false); // Memastikan kelas 'className' tidak ada
contains(className): Memeriksa apakah elemen memiliki kelas tertentu. Mengembalikan true jika kelas ada, dan false jika tidak.
if (element.classList.contains('className')) {
console.log('Kelas ada');
}
replace(oldClass, newClass): Mengganti kelas lama dengan kelas baru pada elemen.
element.classList.replace('oldClass', 'newClass');
Contoh Penggunaan element.classList
Mari kita lihat contoh yang menggunakan element.classList untuk memanipulasi kelas:
Title
Card description here...
Dengan element.classList, kita dapat memanipulasi kelas elemen dengan cara yang lebih bersih dan efisien, yang membuat kode kita lebih mudah dibaca dan dikelola.
Dibawah ini kita akan melakukan studi kasus untuk menampilkan dan menyembunyikan elemen di JavaScript menggunakan element.ClassList.
Title
Deskripsi kartu...
Pada kode di atas, elemen card di sembunyikan & di tampilkan menggunakan toggle dengan kelas hidden. Kelas hidden akan secara bergantian di tambahkan atau di hapus dari elemen card ketika button di klik. Tombol Tampilkan & Sembunyikan akan secara bergantian berdasarkan kondisi kelas hidden yang di periksa menggunakan method contains().
document.createElement
document.createElement() adalah method dalam JavaScript yang digunakan untuk membuat elemen HTML baru secara dinamis. Metode ini memungkinkan kita dapat membuat elemen dari node apa pun (seperti div, p, span dan sebagainya) tanpa langsung menulis kode HTML di dalam dokumen. Setelah elemen dibuat, kita bisa menambahkannya ke dalam DOM (Document Object Model) dengan method seperti appendChild() atau insertBefore().
document.createElement(tagName)
Fungsi di atas akan membuat elemen dengan nama tag yang ditentukan pada parameter tagName. Setelah elemen dibuat, kita bisa menambahkan atribut, teks atau elemen anak ke dalam elemen tersebut. Setelah elemen dibuat, ia tidak langsung ditambahkan ke halaman. Kita perlu secara eksplisit memasukkannya ke dalam DOM menggunakan metode seperti appendChild().
Contoh:
Contoh membuat elemen secara dinamis:
To-Do List
Kita juga bisa secara eksplisit memasukkan elemen ke dalam DOM menggunakan metode insertBefore(). insertBefore() adalah metode dalam JavaScript yang digunakan untuk menyisipkan elemen baru ke dalam DOM sebelum elemen referensi tertentu. Dengan kata lain, metode ini memungkinkan kita menempatkan elemen baru di posisi yang spesifik di dalam suatu parent node (elemen induk), tepat sebelum elemen anak yang sudah ada.
Contoh:
First Element
Third Element
Sekian, Semoga Bermanfaat!
Jangan lupa share artikel ini ke orang lain, barangkali mereka membutuhkan. Jangan sungkan hubungi kami bila ada pertanyan. Atau silahkan tinggalkan komentar di bawah dan mari kita berdiskusi.