Langkah – Langkah Dasar Menjadi Master JS HTML DOM

By | Januari 29, 2019

Pengenalan HTML DOM (Document Object Model)

Langkah – Langkah Dasar Menjadi Master JavaScript – DOM (Document Object Model) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web brwoser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh javascript untuk mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara lain Javascript melihat suatu halaman HTML. Adapun struktur HTML DOM bisa dilhat di bawah ini.

Berikut kegunaan dari object, diantaranya :

  1. Dapat mengubah semua element
  2. Dapat mengubah semua tribut
  3. Dapat mengubah semua style CSS
  4. Dapat menghapus element
  5. Dapat menambah lement dan atribut baru
  6. Dapat bereaksi terhadap semua event
  7. Dapat membuat event baru


Properti HTML DOM

PropertiFungsi
x.innerHTMLMenulis atau mengambil text dari elemen x
x.nodeNameMemberi atau mengambil nama elemen x
x.nodeValueMemberi atau mengambil nilai dari elemen x
x.parentNodeMengambil informasi parent dari elemen x
x.childNodesMengambil informasi child dari elemen x
x.attributsmemberi atau mengambil informasi atribut dari element x

x adalah suatu element.

Baca Juga: Belajar Javascript

Fungsi HTML DOM

Nama FungsiKegunaan
x.getELementById(id)Mengakses elemen dengan ID tertentu
x.getElementsByTagName(nama)Mengakses semua elemen dengan nama tertentu
x.appendChild(node)Menambah element child ke suatu element x
x.removeChild(node)menghapus element child dari suatu element x

x adalah suatu element.


Document Object Collection

KoleksiDeskripsi
anchor[]Memberikan informasi semua anchor (tag a) dalam sebuah dokumen
forms[]Memberikan informasi semua form dalam sebuah dokumen
images[]Memberikan informasi semua images dokumen
link[]Memberikan informasi semua link dalam sebuah dokumen

Contoh script untuk document object collection. Pada contoh script dibawah ini document.write(“JUmlah Form : “+document.forms.length); digunakan untuk menampilkan jumlah form dan akan menghasilkan nilai 2. Udah paham kan apa maksutnya

documentobject.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</title> </head> <body>  <form name="form1"></form>  <form name="form2"></form>  <script type="text/javascript">   document.write("Jumlah Form : "+document.forms.length);  </script> </body> </html>


Document Object Properties

PropertiDeskripsi
cookiememberikan informasi nama/nilai cookie pada document
documentModememberikan informasi mode yang digunakan browser untuk me-render dokumne
domainMemberikan informasi nama domain dari server yang mengolah dokumen
lastModifiedMemberikan informasi tanggal dan waktu kapan dokumen terakhir dimodifikasi
readyStateMemberikan informasi status loading dari dokumen
referrerMemberikan informasi URL yang memanggil halaman yang sedang ditampilkan
titleMemberikan informasi title suatu halaman
URLMemberikan informasi lengkap URL dari suatu dokumen atau halaman

Contoh script untuk document object propertis. Coba copas script dibawah ini, lalu jalankan pada web browser

documentobject2.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</title> </head> <body>  <script type="text/javascript">   document.write(document.title);  </script> </body> </html>


Document Object Method

MthodDeskripsi
open()membuka output stream untuk mengumpulkan informasi yang dikirim oleh document.write()
close()menutup output stream
write()menuliskan text (HTML atau sintaks javascript) ke dokumen atau halaman
writelnSama dengan write tetapi diikuti dengan pindah baris
getElementById()mengakses element berdasarkan id
getElementsByName()mwngakses element berdasarkan name
getElementsByTagNamemengakses elemen berdasarkan tag
URLMemberikan informasi lengkap URL dari suatu dokumen atau halaman

Disini saya memberikan salah satu contoh document object method. Mungkin temen-temen bisa mencoba method yang lainnya atau temen-temen bisa searching di google untuk mendapatkan contoh document object method yang lebih lengkap.

documentobject3.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</title> </head> <body>  <div id="coba">   <button onclick="panggilFunction()">Tampil</button>  </div>  <script type="text/javascript">   function panggilFunction(){    var a = document.getElementById('coba');    a.innerHTML = "<h3>Tampilkan Disini</h3>";   }  </script> </body> </html>

untuk penjelasan code tersebut, dimana pada script onclick=”panggilFunction()” dimana fungsi panggilFunction akan berjalan ketika terjadi aksi klik pada button Tampil. Selanjutnya untuk function panggilFunction() merupakan fungsi javascript panggilFunction. Yang terakhir coba.innerHTML akan mengisi nilai pada div id coba.

Baca Juga: Membuat select dan Deselect All pada Checkbox dengan Javascript

Event Object

  • Memberikan informasi tentang event (aksi user) yang terjadi
  • Mempresentasikan kondisi element saat diberi event, misalkan saat suatubutton diklik, atau keyboard di tekan

Ada macam-macam event yang bisa terjadi pada halaman web atau object HTML. diantaranya adalah

EventDeskripsi
onErrorEvent ini dijalankan ketika terjadi kesalaham. event ini dimiliki oleh objek window dan image
onLoadEvent ini dijalankan ketika suatu objek selesai ditampilkan pada halaman web. Objek yang dimaksud pada keterangan in adalah objek window, frame dan image
onUnloadEvent ini dijalankan ketika tesuatu objek telah dikeluarkan dari ruanga memori, atau tellah selesai digunakan. objek ini adalah window, frmae dan image
onAbortEvent yang dimiliki oleh objek image in akan dibangkitkan ketika sebuah gambar dihentikan proses pemunculannya yang diakibatkan penekanan tombol stop pada browser
onBlurEvent ini dijalankan ketika sebuah element (window, frmae, select, text dan textarea) kehilangan focus
onChangeEvent ini dijalankan ketika sebuah element (select, text, textarea) telah diubah nilainya sebelum element tersebut kehilangan focusnya
onClickEvent ini dijalankan ketika terjadi aksi klik terhadap element, dimana element yang dimaksut adalah semua element dari form yang dapat diklik seperti button
onContextMenuEvent ini dijalankan ketika terjadi aksi klik kanan pada tombol mouse terhadap suatu element
onDblClickhampir sama dengan event onClick, namun akan dijalankan ketika terjadi aksu klik ganda
onFocuskebalikan dari event onBlur. Dijalankan ketika suatu elemen dikenai focus
onHelpEvent ini dijalankan ketika terjadi penekanan terhadap tombol F1
onKeydownEvent ini dijalankan ketika terjadi penekanan kebawah tombol keyboard
onKeypressEvent ini dijalankan ketika terjadi aksi penekanan tombol keyboard. Aksi penekanan ini adalah sebuah aksi lengkap penekanan tombol keyboard. Mulai dari memencet tobolkeyboard tersebut hingga melepaskannya
onKeyupEvent ini dijalankan ketika tombol keyboard yang awal nya ditekan lalu dilepas
onMousedownEvent ini dijalankan ketika terjadi tombol mouse di tekan kebawah
onMousemoveEvent ini dijalankan ketika mouse digerakkan (mouse berpindah posisi)
onMouseoutEvent ini dijalankan ketika panah mouse keluar dari daerah lingkup suatu element
onMouseoverEvent ini dijalankan ketika panah mouse bearada diatas element. yaitu element hyperlink dan element area
onResetEvent yang dimiliki secara khusu oleh objek form ini akan dijalankan ketika terjadi penekanan terhadap tombol reset yang dimiliki form yang bersangkutan
onResizeEvent ini dijalankan ketika jendela browser diubah ukurannya
onSelectEvent ini dijalankan ketika terjadi pemilihan text pada element text dan area dengan meberinya highlight atau blok
onStopEvent ini dijalankan ketika penggunak menekan pada tombol stop di browser
onSubmitEvent ini dijalankan ketika terjadi penekan tombol submit yang dimiliki sebuah form

berikut contoh-contoh untuk event object pada js HTML DOM

onclick.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</title> </head> <body>  <form>   <input type="button" name="test" value="test" onClick="tes()">  </form>  <script type="text/javascript">   function tes(){    alert("Berhasil");   }  </script> </body> </html>

onload.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</title> </head> <body onload="alert('Selamat Datang')">  </body> </html>

onchange.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</title> </head> <body>  <form>   <select name="provinsi" onchange="tampil(this.value);">    <option value=""></option>    <option value="jateng">Jawa Tengah</option>    <option value="jabar">Jawa Barat</option>   </select>  </form>  <div id="kota"></div>  <script type="text/javascript">   function tampil(propinsi){    var kota = "";    switch(propinsi){     case "jateng" : {      kota = "<ul>       <li>Semarang</li>       <li>Solo</li>       </ul>";     }     break;      case "jabar" : {      kota = "<ul>       <li>Bandung</li>       <li>Garut</li>       </ul>";     }     break;      default : kota = "";    }     document.getElementById('kota').innerHTML = kota;   }  </script> </body> </html>

onmouse.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</title> </head> <body>  <table>   <tr onmouseover="this.bgColor='lightblue'" onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">    <td>Baris Pertama</td>   </tr>   <tr onmouseover="this.bgColor='lightblue'" onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">    <td>Baris Kedua</td>   </tr>  </table> </body> </html>

Baca Juga: Tutorial Cara Membuat Menu Responsive

Element Object

Digunakan untuk memanipulasi element HTML

PropertiDeskripsi
accessKeyMenentukan atau memberikan informasi accessKey (shortcut) dari suatu elemen
classNameMenentukan atau memberikan informasi atribut class dari suatu elemen
disabledMenentukan atau memberikan informasi atribut dissabled dari suatu elemen
idMenentukan atau memberikan informasi atribut id dari suatu elemen
innerHTMLMenentukan atau memberikan konten HTML dari suatu elemen
styleMenentukan atau memberikan informasi atribut style dari suatu elemen

elementobject.html

 <!DOCTYPE html> <html> <head>  <title>belajar HTML DOM</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>

Itulah Dasar-dasar untuk menjadi Master JS HTML DOM. Untuk melangkah ke tahap selanjutnya temen-temen harus menguasai bab ini karena bab ini merupakan dasar untuk menguasai bab selanjutnya. Untuk Bab Selanjutnya kita akan membahas apa itu JqGrid. Sekilas tentang JqGrid. dengan JqGrid kita bisa memanipulasi data diantaranya add data, edit data, delete data serta searching.