Hallo sobat program, bertemu lagi dengan saya Rizal dan masih tetap di website dumetschool ini. Dihari yang cerah dan bahagia ini saya akan memberikan sebuah tutorial dasar dari javascript yaitu tentang Cara Memilih Element DOM Javascript.
DOM merupakan singkatan dari Document Object Model dimana document HTML yang berupa element-element, ketika dijalankan dibrowser maka akan menjadi sebuah object dan object tersebut nantinya kita bisa ubah, mainkan atau manipulasi dengan javascript. Dan untuk merubah object tsb kita harus mengetahui setiap pemanggilan atau memilih element yang akan kita manipulasi.
Berikut ini saya memberikan contoh sederhana dalam Cara Memilih Element DOM Javascript. Disini kita akan belajar tentang cara memilih berdasarkan ID, Class, serta tag dari HTML.
Oke tanpa panjang lebar lagi mari kita mulai saja, langkah pertama jalankan/run text-editornya kemudian ketiklah dan simpan kode HTML serta CSS seperti pada contoh dibawah ini :
|
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 |
<!DOCTYPE html> <html> <head> <title>Cara Memilih Element DOM Javascript</title> <style type="text/css"> *{margin:40px 0; padding: 0} .container{width: 400px; margin:auto; background: lightgrey; padding: 20px} h2{text-align: center;} ul li {list-style-position: inside;} </style> </head> <body> <h2>Cara Memilih Element DOM Javascript</h2> <div class="container"> <div id="hasil"></div> <hr> <div class="contoh"></div> <div class="contoh"></div> <div class="contoh"></div> <hr> <ul> <li>Sepak Bola</li> <li>Basket</li> <li>Renang</li> </ul> </div> </body> </html> |
Dari kode HTML diatas, ketika kita jalankan dibrowser maka hasilnya akan menjadi seperti pada contoh dibawah ini :
Masih kosong ya teman-teman, lalu langkah berikutnya kita akan menambahkan object/element kedalam document HTML tsb dengan menggunakan Javascript. Teman-teman bisa tambahkan script javascriptnya seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> //Memilih berdasarkan ID document.getElementById("hasil").innerHTML = "Hallo Dumetschool"; //Memilih berdasarkan Class document.getElementsByClassName("contoh")[0].innerHTML = "Terbaik dan Nomor Satu"; document.getElementsByClassName("contoh")[1].innerHTML = "Terbaik dan Nomor Dua"; document.getElementsByClassName("contoh")[2].innerHTML = "Terbaik dan Nomor Tiga"; //Memilih berdasarkan tag name HTML document.getElementsByTagName("li")[0].innerHTML = "Belajar"; document.getElementsByTagName("li")[1].innerHTML = "Mengaji"; document.getElementsByTagName("li")[2].innerHTML = "Bersedekah"; </script> |
Dari kedua kode diatas jika digabungkan akan menjadi seperti pada contoh dibawah ini :
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <title>Cara Memilih Element DOM Javascript</title> <style type="text/css"> *{margin:40px 0; padding: 0} .container{width: 400px; margin:auto; background: lightgrey; padding: 20px} h2{text-align: center;} ul li {list-style-position: inside;} </style> </head> <body> <h2>Cara Memilih Element DOM Javascript</h2> <div class="container"> <div id="hasil"></div> <hr> <div class="contoh"></div> <div class="contoh"></div> <div class="contoh"></div> <hr> <ul> <li>Sepak Bola</li> <li>Basket</li> <li>Renang</li> </ul> </div> <script type="text/javascript"> //Memilih berdasarkan ID document.getElementById("hasil").innerHTML = "Hallo Dumetschool"; //Memilih berdasarkan Class document.getElementsByClassName("contoh")[0].innerHTML = "Terbaik dan Nomor Satu"; document.getElementsByClassName("contoh")[1].innerHTML = "Terbaik dan Nomor Dua"; document.getElementsByClassName("contoh")[2].innerHTML = "Terbaik dan Nomor Tiga"; //Memilih berdasarkan tag name HTML document.getElementsByTagName("li")[0].innerHTML = "Belajar"; document.getElementsByTagName("li")[1].innerHTML = "Mengaji"; document.getElementsByTagName("li")[2].innerHTML = "Bersedekah"; </script> </body> </html> |
Jika sudah seperti pada contoh diatas maka langkah berikutnya teman-teman simpan dan silahkan coba dijalankan dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan menjadi seperti pada contoh dibawah ini :
Oke sangat mudah ya teman-teman dalam mempelajari DOM Javascript ini J hehe. Kalau begitu cukup sampai disini dulu pembahasan saya tentang Cara Memilih Element DOM Javascript semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih