Cara menggunakan DOM.CON di JavaScript

Jika Anda sedang mempelajari JavaScript, maka Anda pasti tahu bahwa JavaScript dapat membuat halaman website menjadi lebih dinamis dan menarik. Namun tahukah Anda, hal itu bisa terjadi melalui bantuan DOM. Tunggu, apa itu DOM?

Singkatnya, DOM JavaScript adalah sesuatu yang dapat memanipulasi halaman web HTML. Pada artikel ini, Anda akan mempelajari apa itu JavaScript DOM, fungsinya, hingga cara memanipulasi HTML melalui JavaScript DOM

Apakah kamu penasaran?

Daftar isi

Apa itu DOM JavaScript?

DOM JavaScript adalah antarmuka yang memungkinkan pengembang memanipulasi halaman web dalam hal struktur, tampilan, dan konten. Nah, DOM adalah singkatan dari Document Object Model

Awalnya, situs web ini terdiri dari gaya HTML dan CSS statis. Hingga akhirnya muncul JavaScript. JavaScript adalah bahasa pemrograman untuk membuat situs web lebih dinamis

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

Rupanya, browser membuat dokumen yang dikenal sebagai DOM untuk setiap halaman web. Ya, DOM-lah yang memungkinkan JavaScript mengakses dan memanipulasi semua elemen statis di halaman

Penasaran seperti apa struktur DOM sebuah halaman website?

Sedangkan dia adalah hasil script setelah diolah menjadi DOM

Seperti yang Anda lihat, HTML adalah elemen induk. Ini memiliki dua elemen anak yaitu Kepala dan Tubuh. Begitu seterusnya hingga elemen terkecil. Nantinya, setiap elemen bisa dimanipulasi oleh developer dengan bantuan JavaScript

Nah itulah gambaran singkat tentang apa itu DOM JavaScript. Mari kita mengenal fungsi JavaScript DOM pada poin selanjutnya

Baca juga. Cara Membuat JavaScript di HTML

fungsi DOM

Seperti yang sudah dibahas pada poin apa itu DOM, kalian sudah tahu bahwa fungsi DOM JavaScript adalah untuk memanipulasi halaman website agar lebih dinamis. Bagaimana cara kerjanya?

Rupanya, DOM melakukannya dengan mengambil, mengubah, menambah, atau menghapus elemen HTML. Ini akan dibahas lebih detail di bagian lain artikel

Selain itu, saat memanipulasi halaman, DOM juga mengumpulkan data, fungsi, dan atribut milik elemen yang diakses. Nah, properti itu bisa digunakan untuk keperluan lain

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

Sampai di sini, Anda sudah memahami arti dan fungsi DOM JavaScript. Mari pelajari 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

Metode ini dilakukan melalui metode getElementByID(). Berikut adalah contoh scriptnya

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

Dari sana, DOM JavaScript dapat mengambil elemen dengan ID footer-title dan menyimpannya dalam sebuah variabel

Baca juga. Perbedaan antara Java dan JavaScript

2. Mengambil Elemen dengan Kelas

Anda bisa mendapatkan elemen dengan metode getElementsByClassName(). Ini contoh scriptnya

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

Perbedaannya adalah, di sini, DOM JavaScript tidak hanya dapat mengambil satu, tetapi semua elemen di bawah item daftar Kelas

Baca juga. JavaScript dan CSS khusus di WordPress

3. Mengambil Elemen dengan Tag Nama

Anda juga bisa mendapatkan lebih dari satu elemen dengan metode getElementsByTagName(). Misalnya seperti ini

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

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

Baca juga. Membuat Penghitung Waktu Mundur dengan JavaScript

4. Mengambil Elemen dengan querySelector

Tidak hanya HTML, Anda juga bisa menggunakan JavaScript DOM untuk mengambil elemen CSS. Caranya, dengan metode querySelector. Berikut ini beberapa contoh skrip

1. Mengambil elemen CSS dengan ID

var header = document.querySelector(‘#footer)

2. Mengambil elemen CSS dengan Kelas

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

3. Mengambil elemen CSS dengan Tag

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

4. Mengambil elemen CSS lebih spesifik

document.querySelector(“h2.footer”);

5. Mengambil Elemen dengan querySelectorAll

querySelectorAll adalah metode alternatif lain untuk mengambil elemen CSS. Cara ini tidak berbeda dengan cara sebelumnya. Ini adalah sebuah contoh

var heading = document.querySelectorAll(‘h1.heading’);

Baca juga. Cara Membuat Situs Web HTML CSS

Cara Memodifikasi Elemen HTML

JavaScript DOM memungkinkan Anda mengubah struktur, konten, dan tampilan elemen HTML dengan metode berikut

1. Memodifikasi Konten HTML

Anda dapat mengubah konten HTML menggunakan properti innerHTML. Nah, properti ini bisa digabungkan dengan metode getElementbyID() sebagai berikut

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

Atau bisa juga digabungkan dengan metode getElementsByTagName() seperti ini

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

2. Mengubah Nilai Atribut

Tidak hanya untuk mengubah konten, Anda juga dapat menggunakan JavaScript DOM untuk mengubah nilai atribut. Contohnya seperti script di bawah ini

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

Dengan begitu, JavaScript DOM akan mengubah nilai dari atribut img menjadi gambar. jpg

3. Mengubah Gaya/Tampilan

JavaScript DOM juga berguna untuk mengubah gaya elemen HTML dan CSS. Namun untuk melakukan itu, Anda perlu mengubah properti style terlebih dahulu seperti ini

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

Baru setelah itu, Anda bisa mengambil elemen tertentu lalu mengubah gayanya. Misalnya di sini, kami mengubah gaya dari borderBottom

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

Cara Menambahkan dan Menghapus Elemen HTML

Selain kebutuhan untuk mengambil dan mengubah elemen HTML, Anda juga bisa menggunakan DOM JavaScript untuk menambah dan menghapus elemen, lol. Begini caranya

1. Cara Menambahkan Elemen

Untuk menambahkan elemen baru, Anda cukup menggunakan metode createElement() seperti ini

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

Dari sana, DOM JavaScript akan membuat elemen bernama div. Setelah itu, Anda dapat mengisi elemen tersebut dengan konten baru. Ini sebuah contoh

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

2. Cara Menghapus Elemen

Untuk menghapus elemen, Anda dapat menggunakan metode removeChild(). Ini sebuah contoh

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

3. Cara Mengganti Elemen

DOM JavaScript juga memungkinkan Anda mengganti elemen yang ada. Pertama-tama, Anda perlu membuat elemen baru seperti ini

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

Kemudian, saatnya mengganti elemen-elemen di atas. Caranya adalah dengan menulis script di bawah ini

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

4. Menulis Elemen Langsung ke Aliran Keluaran HTML

Salah satu fitur unik DOM JavaScript adalah kemampuannya menggabungkan HTML dan JavaScript ke dalam satu baris kode. Nah, ini bisa dilakukan dengan metode write() seperti di bawah ini

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

Selain bisa memuat teks seperti di atas, metode write() ini juga bisa digunakan untuk menginput objek, misalnya Tanggal seperti ini

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

Nah, itulah panduan lengkap cara memanipulasi elemen menggunakan JavaScript DOM. Jangan pergi dulu karena kami masih memiliki beberapa informasi penting

Baca juga. Cara Menyisipkan Gambar di HTML

Penangan Acara

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

Nah, beberapa event yang biasa ditemukan di website tersebut antara lain

Klik mouse kiri atau kanan
Gerakan tikus
Transisi pemuatan halaman
Ubah atau transisi dari input formulir

1. Pengaturan acara

Anda dapat mengatur Acara menggunakan properti innerHTML seperti skrip berikut

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

Ketika pengguna mengklik tombol Silakan klik. , maka akan muncul tombol pesan Thank you

2. Konfigurasikan Pendengar Acara

DOM JavaScript juga memungkinkan Anda mengatur Pendengar Acara. Dengan begitu, halaman web akan merespon Event yang dilakukan pengguna. Nah, ini contoh scriptnya

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

Saat pengguna menjauhkan mouse dari tombol btn, halaman web akan secara otomatis merespons acara tersebut. Seperti apa bentuknya?

Hubungan Node

Di bagian mana DOM, Anda tahu bahwa halaman web terdiri dari banyak elemen. Nah, unsur-unsur tersebut ternyata saling berkaitan satu sama lain. Itu disebut Relasi Node

Relasi Node ini menghubungkan setiap elemen seperti silsilah keluarga, seperti

parentNode – Elemen Induk
childNodes – Elemen anak
firstChild – Elemen anak pertama
lastChild – Elemen anak terakhir
nextSibling – Elemen saudara kandung

Misalnya, Anda bisa mendapatkan elemen induk dari judul dengan skrip di bawah ini

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

Sudah Paham Apa itu DOM kan?

Pada artikel ini, Anda sudah memahami apa itu JavaScript DOM, fungsi DOM, cara memanipulasi elemen dengan JavaScript DOM, dan mempelajari Event Handler dan Relasi Node

Mempertimbangkan fungsinya yang beragam, kami menyarankan Anda mempelajari DOM JavaScript dengan rajin. Bagaimana cara melakukannya?

Kedua, tidak ada salahnya mengunggah website dengan script DOM ke domain hosting. Jadi, Anda memiliki gambaran seperti apa tampilan, struktur, dan konten website saat diakses oleh pengunjung

Nah, jika Anda membutuhkan hosting untuk website HTML dan JavaScript, layanan Unlimited Hosting dari Niagahoster bisa menjadi pilihan. Mengapa?

Layanan ini dilengkapi dengan berbagai fitur menarik, seperti cPanel versi baru dan akses FTP untuk kemudahan mengelola file website. Harganya juga sangat terjangkau, mulai dari Rp9 ribu/bulan saja. Dijamin cocok untuk anda yang sedang belajar membuat website

Yuk coba Unlimited Hosting Niagahoster sekarang

Saya Ingin Mencoba Layanan Hosting Murah Indonesia Sekarang

Membagikan

Muhammad Ariffudin Ikuti juga dikenal sebagai Ariffud

Berlangganan sekarang

Dapatkan berbagai artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Berlangganan sekarang dan raih kesuksesan bersama kami

Apa itu DOM dalam JavaScript?

“DOM atau Document Object Model adalah objek JavaScript khusus yang hanya ada di lingkungan Browser . Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya. ”

Mengapa menggunakan DOM?

fungsi DOM . Saat proses rendering file HTML sedang berlangsung, browser membuat model objek dokumen atau DOM. memungkinkan untuk memanipulasi tampilan web menggunakan JavaScript. Pada saat proses dari render file HTML sedang berlangsung, browser membuat model objek dokumen atau DOM.

Apa itu JavaScript DOM dan apa model penerapannya?

JavaScript DOM adalah antarmuka yang memungkinkan pengembang untuk memanipulasi halaman web dalam hal struktur, tampilan, dan konten . Nah, DOM adalah singkatan dari Document Object Model. Awalnya, situs web ini terdiri dari gaya HTML dan CSS statis.

Bagaimana cara memanggil fungsi dalam JavaScript?

Cara Memanggil/Menjalankan Fungsi . Nama fungsi(); Contoh. // buat fungsi function sayHello(){ console. log("Halo Dunia. "); } // panggil fungsi sayHello() // kemudian akan menghasilkan -> Hello World.