Kegunaan DOM – DOM JavaScript adalah sebuah program antarmuka dengan faedah utama untuk mengubah penampilan sebuah halaman situs tanpa kudu berisi ulang. Kegunaan DOM ini sanggup kamu dapatkan dikarenakan model ini mempunyai kemampuan untuk mengubah penampilan dengan langkah lakukan modifikasi dan manipulasi dengan JavaScript.
Kamu sanggup mengkombinasikan HTML dan JavaScript dengan mengfungsikan DOM, lho. Wah, sepertinya menarik, ya? Yuk liat ulasan selengkapnya langsung di bawah ini!
Apa Itu DOM?
DOM singkatan berasal dari Document Object Model, yang merupakan sebuah interface program. Kegunaan DOM adalah untuk mengubah penampilan sebuah halaman situs tanpa kudu berisi ulang. Hal ini sangat mungkin dikarenakan DOM bekerja dengan lakukan manipulasi JavaScript.
Jadi begini penjelasannya, pada tingkat paling sederhana, sebuah situs tersusun atas HTML dan CSS model yang statis. Saat kamu mengfungsikan browser untuk membuka situs tersebut, browser akan menampilkan hasil berasal dari DOM. Keberadaan DOM menyebabkan JavaScript sanggup membuka maupun memanipulasi bermacam elemen.
Selanjutnya, JavaScript inilah yang bertugas untuk menciptakan penampilan halaman situs menjadi lebih dinamis. Dengan kata lain, DOM merupakan sebuah dokumen yang menjadi jembatan komunikasi pada bhs statis dan dinamis pada sebuah website. Dokumen ini dibuat oleh browser dan dihidangkan untuk masing-masing halaman web.
DOM diatur dalam struktur objek dan membatasi properties & event elemen HTML, metode akses elemen HTML, serta elemen HTML sebagai objek. Di dalam sebuah DOM, HTML merupakan elemen induk yang miliki anakan Head dan Body. Anakan ini juga miliki anakan elemen-elemen lainnya, yang disebut sebagai node.
Kegunaan DOM
Jadi apa sesungguhnya faedah DOM? Fungsi utama berasal dari DOM ialah untuk memanipulasi elemen pada halaman situs dengan mengfungsikan bhs pemrograman JavaScript. Jika dijelaskan secara lebih rinci, sekitar begini fungsi-fungsi DOM:
1. Menambahkan atau Menghapus Elemen
Tampilan pada browser terdiri atas bermacam elemen yang berbeda. Misalnya layaknya elemen img pada sebuah elemen body. Dalam elemen img, HTML akan mempunyai anak head dan body. Baru sesudah itu dalam elemen body terdapat elemen img.
Dengan DOM, kamu sanggup menghapus elemen khusus yang tidak diperlukan. Selain itu, kamu juga sanggup beri tambahan elemen baru pada seperangkat DOM ini.
2. Melakukan Aksi Terhadap Elemen
Selain lakukan modifikasi, faedah DOM juga meliputi lakukan aksi pada elemen. Misalnya layaknya menghimpit tombol elemen, menggulir halaman web, dan sebagainya.
3. Memberikan Respon pada Aksi yang Terjadi di Elemen
Kegunaannya dalam lakukan aksi pada sebuah elemen juga diikuti dengan faedah lain layaknya beri tambahan tanggapan berasal dari aksi yang terjadi pada elemen. Misalnya memilih faedah tanggapan kala sebuah elemen diberikan aksi tombol yang diklik.
4. Mengubah Atribut Elemen
Bukan hanya beri tambahan dan mengurangi, modifikasi pada elemen juga meliputi mengubah atributnya. Sebagai contoh, kamu sanggup mengfungsikan DOM untuk mengubah atribut src pada elemen img atau mengubah atribut href yang ada pada elemen a.
Cara Menggunakan DOM
Nah, sehabis memahami faedah DOM, penasaran bukan bagaimana langkah menggunakannya? Tanpa di sadari sesungguhnya pemakaian DOM sudah sering di laksanakan sehari-hari, lho. Contohnya layaknya menyebabkan faedah JavaScript untuk memilih aksi elemen button yang di tekan.
Selain itu, misal pemakaian DOM lainnya adalah layaknya menerapkan animasi pada elemen. Ada sebagian langkah untuk mengfungsikan DOM, menjadi berasal dari seleksi elemen, mengubah elemen, beri tambahan elemen, dan sebagainya. Untuk mempersingkatnya, mari liat ulasan di bawah ini!
Seleksi Elemen
Untuk lakukan modifikasi elemen, pertama-tama kamu kudu mengambil elemen berikut khususnya dahulu. Untuk mendapatkan elemen yang di cari ada sebagian langkah yang sanggup di lakukan. Adapun sebagian di antaranya adalah sebagai berikut:
Mengambil dengan ID elemen. Kamu sanggup mendapatkan elemen dengan ID footer-title untuk sesudah itu di simpan pada sebuah variabel.
Contoh scriptnya adalah sebagai berikut:
var title = document.getElementById(footer-title’);
Mengambil dengan nama tag elemen. Jika elemen yang dambakan di sita mengfungsikan tagar nama tertentu, kamu sanggup mencarinya mengfungsikan nama tagnya. Sebagai misal tagar di script berikut adalag ink.
Contoh script: var ListItems = documents.getElementsByTagName(‘ink’);
Mengambil dengan Class elemen. Untuk mendapatkan seluruh elemen dalam sebuah Class list-items, kamu sanggup mengfungsikan misal script berikut:
var items = document.getElementsByClassName(‘list-items’);
Mengubah Elemen
Dengan mengfungsikan JavaScript, kamu sanggup lakukan pergantian pada isi konten, struktur, gaya, sampai penampilan elemen HTML. Berikut sebagian metode untuk mengubahnya:
Mengubah konten HTML. Pertama, kamu sanggup mengubah konten HTML dengan properti innerHTML. Untuk lakukan pergantian ini, kamu sanggup memilih dua metode: mengfungsikan paduan dengan langkah mengambil elemen mengfungsikan ID atau dengan langkah mengambil elemen menggunakantagar nama.
Contoh script untuk paduan dengan langkah seleksi ID elemen:
document.getElementById(“#header”).innerHTML = “Hi Everyone!”;
Contoh script untuk paduan dengan langkah seleksi tag elemen:
document.getElementTagName(“div”).innerHTML = “<h2>Hi Everyone!</h2>”
Mengubah tampilan. Kegunaan DOM yang banyak di cari adalah untuk mengubah penampilan halaman website. Untuk melakukannya, kamu kudu lakukan dua langkah berurutan. Pertama ubah properti model layaknya script berikut:
document.getElementById(id).style.property = new style
Jika sudah, lalu ambil elemen khusus untuk di ubah gayanya. Misalnya untuk mengubah tipe border bottom, maka scriptnya menjadi:
document.getElementByTag(“h2”).style.borderBottom = ‘’solid 5px #FFF”;
Mengubah value berasal dari atribut. Kamu sanggup mengubah value berasal dari sebuah atribut elemen. Sebagai contoh, kamu sanggup mengubah value atribut img menjadi image.jpg. Adapun misal scriptnya sebagai berikut:
document.getElementByTag(“img”).src = “image.jpg”;
Menambahkan Elemen
Selain lakukan modifikasi pada elemen, kamu juga sanggup beri tambahan atau apalagi menghapus elemen yang sudah ada. Begini ulasan langkah beri tambahan dan menghapus elemen:
Menambah elemen. Untuk beri tambahan elemen baru, kamu sanggup mengfungsikan metode createElement(). Sebagai misal elemen yang akan di buat bernama div. Berikut misal scriptnya:
var div = document.createElement(‘div’);
Dengan script di atas, kamu sanggup menciptakan elemen baru bernama div. Berikutnya, kamu hanya kudu isi elemen baru dengan bermacam isi konten yang di perlukan.
Menghapus elemen. Menghilangkan sebuah elemen sanggup di laksanakan mengfungsikan metode removeChild(). Adapun misal scriptnya sebagai berikut:
var elem = document.querySelector(‘#footer);
elem.parentNode.removeChild(elem);
Mengganti elemen. Selain menaikkan dan menghapus, kamu juga sanggup mengganti elemen yang sudah ada dengan yang baru. Untuk melakukannya, kamu kudu menyebabkan elemen baru dengan script di bawah ini khususnya dahulu:
var div = document.querySelector(‘#div’);
var newDiv =document.createElement(‘div’);
Selanjutnya, kamu sanggup menjadi mengganti elemen berikut dengan memasukkan script berikut:
newDiv.innerHTML = “Hi Everyone2”;
div.parentNode.replaceChild(newDiv, div);
Menulis Elemen DOM HTML
Salah satu berlebihan DOM adalah sanggup mengkombinasikan HTML dan JavaScript dalam satu baris kode. Kamu kudu mengimplementasikan metode write() untuk lakukan perihal ini. Berikut misal scriptnya:
Document.write(“<h2>Hi Everyone!</h2><p>This is an example text!</p>”);
Itulah penjelasan berkenaan faedah DOM lengkap dengan pengertian, fungsi, serta langkah menggunakannya untuk memodifikasi elemen. Mari kita tarik pemikiran berasal dari ulasan ini. Jadi, DOM adalah Document Object Model yang merupakan penghubung komunikasi pada bhs statis dan di namis.
Modifikasi dan manipulasi yang di laksanakan mengfungsikan DOM mengfungsikan bhs pemrograman HTML dan JavaScript. Dengan pertolongan DOM, pengguna sanggup mengubah penampilan sebuah halaman situs dengan mengubah elemen-elemen berasal dari situs tersebut. Contohnya layaknya mengatur faedah elemen, mengelola tanggapan aksi, dan sebagainya.
Semoga ulasan berkenaan faedah DOM ini sanggup memperkaya pengetahuan kamu seputar situs development, ya. Jika kala ini kamu sedang mengembangkan website, pastikan untuk memilih sarana hosting berkualitas untuk mendapatkan performa terbaik.
Kebetulan, TokoWebindo sediakan promo besar-besaran dengan harga paket sarana hosting menjadi berasal dari 10 ribuan saja! Yuk cobalah cek penawarannya sekarang!