17+ Contoh DOM JavaScript Berikut Method Dan Fungsinya

Jawaraspeed - 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: Jasa SEO Bulanan Murah Mulai Rp100k/Keyword Jawaraspeed

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.

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:

!BARU Tools Instant Artikel #Adsense !BARU Tools Riset Keyword PREMIUM !BARU Tools Perang SEO #1 Google !BARU Tools AGP Rewrite Artikel AI Robot !BARU Tools Scrape Data Shopee Gratis !BARU Tools Youtube Jadi Artikel Tools SEO Artikel Pilar Tools Backlink Building

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: Roadmap Belajar JavaScript untuk Pemula di tahun 2023 ...

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: Cara Penempatan JavaScript Pada HTML [Pemula]

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 Tools All In One ChatGPT

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: Tools Membuat Artikel Otomatis Online Dan Gratis

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: