Hallo teman – teman pada kesempatan kali ini saya akan membahas tentang Mengenal Element Object dalam Pemrograman. Element object digunakan untuk memanipulasi element HTML. Elemen adalah kelas dasar yang paling umum dari mana semua objek dalam Dokumen mewarisi. Ini hanya memiliki metode dan sifat yang umum untuk semua jenis elemen. Kelas yang lebih spesifik mewarisi dari Elemen. Misalnya, antarmuka HTMLElement adalah antarmuka dasar untuk elemen HTML, sedangkan antarmuka SVGElement adalah basis untuk semua elemen SVG. Sebagian besar fungsi ditentukan lebih jauh dari hierarki kelas.
Ada banyak sekali element object, di sini saya akan memberikan beberpa properti element object:
Properti | Deskripsi |
accessKey | Menentukan atau memberikan informasi accesskey (shortcut) dari suatu elemen. |
className | Menentukan atau memberikan informasi atribut class dari suatu elemen. |
disabled | Menetukan atau memberikan informasi atribut disabled dari suatu elemen. |
id | Menentukan atau memberikan informasi atribut id dari suatu elemen. |
innerHTML | Menentukan atau memberikan konten HTML dari suatu elemen. |
style | Menentukan atau memberikan informasi atribut style dari suatu elemen. |
Oke untuk lebih jelasnya saya akan memberikan sebuah contoh dari elemen object:
seperti biasa kita persiapkan terlebih dahulu text editornya, kalau sudah silahkan ikuti langkah sebagai berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title> Cara Menggunakan Element Object dalam Javascript </title> </head> <body> <div id="welcome"> <h1>Selamat Datang</h1> </div> <button id="ganti" onclick="gantiwarna()">Biru</button> <script type="text/javascript"> function gantiwarna(){ var a=document.getElementById('welcome'); var b=document.getElementById('ganti'); if(b.innerHTML=="Biru") { a.style.cssText="Background-color:blue;"; b.innerHTML = "Merah"; } else if(b.innerHTML="Merah") { a.style.cssText="Background-color:red;"; b.innerHTML = "Biru" } } </script> </body> </html> |
Oke dari script di atas saya mempunyai elemen id welcom dan elemen id ganti, dimana nantinya isi dari elemen id welcome akan saya rubah bacgroundnya menggunakan tombol button yang saya kasih id ganti.
nantinya, ketika tombol button akan mempunyai dua warna yaitu biru dan merah ketiak saya klik biru maka elemen h1 akan berubah menjadi biru dan begitu juga sebaliknya.
Oke untuk lebih jelasnya silahkan lihat demo . Oke semoga bermanfaat untuk semuanya. terima kasih .