- JavaScript merupakan bahasa pemrograman yang sangat populer dan sering digunakan dalam pengembangan aplikasi web. Salah satu fitur yang sangat penting dalam JavaScript adalah DOM (Document Object Model). DOM merupakan representasi struktur HTML atau XML dari sebuah dokumen yang memungkinkan JavaScript untuk berinteraksi dengan elemen-elemen di dalamnya. Dalam artikel ini, akan disajikan 17+ contoh penggunaan DOM JavaScript beserta method dan fungsinya.
Ingin Meningkatkan Traffic Website dan Mengembangkan Bisnis?
Segera Cek:
1. getElementById()
Method ini digunakan untuk mengambil elemen HTML berdasarkan ID-nya. Contohnya sebagai berikut:
javascript
var element = document.getElementById("nama-elemen");
Dengan menggunakan method ini, kita dapat dengan mudah mengakses elemen dengan ID tertentu dan melakukan manipulasi pada elemen tersebut.
2. getElementsByTagName()
Method ini digunakan untuk mengambil elemen HTML berdasarkan nama tag-nya. Contohnya sebagai berikut:
javascript
var elements = document.getElementsByTagName("tag-html");
Dengan menggunakan method ini, kita dapat mengakses semua elemen dengan nama tag tertentu dan melakukan operasi pada setiap elemen tersebut.
Baca Juga:
3. getElementsByClassName()
Method ini digunakan untuk mengambil elemen HTML berdasarkan nama kelas-nya. Contohnya sebagai berikut:
javascript
var elements = document.getElementsByClassName("nama-kelas");
Dengan menggunakan method ini, kita dapat mengakses semua elemen dengan nama kelas tertentu dan melakukan manipulasi pada elemen-elemen tersebut.
4. querySelector()
Method ini digunakan untuk mengambil elemen HTML menggunakan selector CSS. Contohnya sebagai berikut:
javascript
var element = document.querySelector("selector-css");
Dengan menggunakan method ini, kita dapat mengambil elemen pertama yang sesuai dengan selector CSS yang diberikan.
5. querySelectorAll()
Method ini digunakan untuk mengambil semua elemen HTML yang sesuai dengan selector CSS. Contohnya sebagai berikut:
javascript
var elements = document.querySelectorAll("selector-css");
Dengan menggunakan method ini, kita dapat mengambil semua elemen yang sesuai dengan selector CSS yang diberikan.
Mungkin Kamu Membutuhkan Tools Kusus SEO dan Marketing Ini:
6. createElement()
Method ini digunakan untuk membuat elemen HTML baru. Contohnya sebagai berikut:
javascript
var element = document.createElement("tag-html");
Dengan menggunakan method ini, kita dapat membuat elemen baru yang nantinya dapat kita manipulasi dan tambahkan ke dalam dokumen.
7. appendChild()
Method ini digunakan untuk menambahkan elemen anak ke dalam elemen tertentu. Contohnya sebagai berikut:
javascript
parentElement.appendChild(childElement);
Dengan menggunakan method ini, kita dapat menambahkan elemen baru sebagai elemen anak dari elemen yang sudah ada.
8. removeChild()
Method ini digunakan untuk menghapus elemen anak dari elemen tertentu. Contohnya sebagai berikut:
javascript
parentElement.removeChild(childElement);
Dengan menggunakan method ini, kita dapat menghapus elemen anak dari elemen yang sudah ada.
Mungkin kamu suka:
9. replaceChild()
Method ini digunakan untuk menggantikan elemen anak dengan elemen baru. Contohnya sebagai berikut:
javascript
parentElement.replaceChild(newElement, oldElement);
Dengan menggunakan method ini, kita dapat menggantikan elemen anak dengan elemen baru pada elemen yang sudah ada.
10. innerHTML
Property ini digunakan untuk mengambil atau mengubah isi dari elemen HTML. Contohnya sebagai berikut:
javascript
element.innerHTML = "konten-baru";
Dengan menggunakan property ini, kita dapat mengakses dan mengubah isi dari elemen HTML.
11. style
Property ini digunakan untuk mengambil atau mengubah properti gaya (CSS) dari elemen HTML. Contohnya sebagai berikut:
javascript
element.style.property = "value";
Dengan menggunakan property ini, kita dapat mengakses dan mengubah properti gaya dari elemen HTML.
Kamu pasti menyukai artikel berikut ini:
12. addEventListener()
Method ini digunakan untuk menambahkan event listener ke elemen HTML. Contohnya sebagai berikut:
javascript
element.addEventListener("event", function() {// kode yang akan dijalankan saat event terjadi});
Dengan menggunakan method ini, kita dapat menangani event yang terjadi pada elemen HTML.
13. removeEventListener()
Method ini digunakan untuk menghapus event listener dari elemen HTML. Contohnya sebagai berikut:
javascript
element.removeEventListener("event", function() {// kode yang akan dijalankan saat event terjadi});
Dengan menggunakan method ini, kita dapat menghapus event listener yang sudah ditambahkan sebelumnya.
Permudah Pekerjaan Kamu dengan
14. getAttribute()
Method ini digunakan untuk mengambil nilai dari atribut tertentu pada elemen HTML. Contohnya sebagai berikut:
javascript
var value = element.getAttribute("nama-atribut");
Dengan menggunakan method ini, kita dapat mengambil nilai dari atribut tertentu pada elemen HTML.
15. setAttribute()
Method ini digunakan untuk mengatur nilai dari atribut tertentu pada elemen HTML. Contohnya sebagai berikut:
javascript
element.setAttribute("nama-atribut", "nilai-atribut");
Dengan menggunakan method ini, kita dapat mengatur nilai dari atribut tertentu pada elemen HTML.
16. removeAttribute()
Method ini digunakan untuk menghapus atribut tertentu dari elemen HTML. Contohnya sebagai berikut:
javascript
element.removeAttribute("nama-atribut");
Dengan menggunakan method ini, kita dapat menghapus atribut tertentu dari elemen HTML.
Capek Bikin Artikel Untuk Konten Harian? Cobain Sekarang Juga:
17. classList
Property ini digunakan untuk mengelola kelas pada elemen HTML. Contohnya sebagai berikut:
javascript
element.classList.add("nama-kelas");
element.classList.remove("nama-kelas");
element.classList.toggle("nama-kelas");
element.classList.contains("nama-kelas");
Dengan menggunakan property ini, kita dapat menambahkan, menghapus, dan memeriksa keberadaan kelas pada elemen HTML.
18. scrollIntoView()
Method ini digunakan untuk menggulirkan tampilan ke elemen tertentu. Contohnya sebagai berikut:
javascript
element.scrollIntoView();
Dengan menggunakan method ini, kita dapat menggulirkan tampilan ke elemen yang diinginkan.
Demikianlah 17+ contoh penggunaan DOM JavaScript beserta method dan fungsinya. Dengan memahami dan menguasai penggunaan DOM dalam JavaScript, Anda dapat membuat aplikasi web yang interaktif dan dinamis. Semoga artikel ini bermanfaat bagi Anda dalam mempelajari JavaScript lebih lanjut.
Baca Juga Artikel Terbaru Kami:
