Apa itu DOM (Document Object Model) pada Javascript ?

18.07 in Tutorial Javascript

Halo para pencari informasi. Kali ini kecebong racing mau membahas sedikit apa itu Document Object Model (DOM)? Hal ini itu sering muncul ketika kita mempelajari Javascript. DOM ini perlu kita perlajari dan sangat berguna sekali manfaatnya jika kita menguasai materi satu ini. Oke, langsung aja dibahas yah....

Document Object Model (DOM) adalah suatu object standar untuk HTML/XML yang bersifat platform independent, dimana DOM Javascript dapat mengubah tampilan dari HTML secara dinamis dan terstruktur. DOM merupakan standar dari W3C(World Wide Web Consortium). Bisa juga kita bilang bagaiamana cara pandang DOM pada HTML. Bukan hanya content document saja yang perlu diupdate dan edit, tetapi struktur dan stylenya juga dapat diupdate lagi.

Document Object Model terbagi menjadi 3 bagian yang berbeda :

• Core DOM      : model standar untuk semua jenis document
• XML DOM      : model standar untuk document XML
• HTML DOM    : model standar untuk document HTML

DOM dalam Javascript adalah memandang elemen-elemen document sebagai suatu object. Object ini bisa memuat method dan properties. Kemudian untuk memproses object-object dalam dokumen HTML tersebut menggunakan method & properties tersebut.

Jadi, kesimpulannya DOM itu menurut saya DOM = tag-tag HTML itu sendiri, namun karena yang menggunakannya adalah Javascript maka diberi nama dengan DOM. Mengapa demikian? Karena tag-tag pada HTML tersebut akan dijadikan sebuah object oleh javascript dan dapat di olah. Berikut ini contoh menggunakan Document Object Model (DOM) :

Berikut tampilan HTML :

Berikut Tampilan Javanya :

Ketika keduanya dijalankan, dan buttonnya diklik, maka akan muncul window alertnya yang bertuliskan "Hello Javascript !!",  hasil yang ditampilkan seperti gambar berikut :

Kali ini saya akan mengedit sedikit script javanya, dimana supaya Tulisan Second paragraph pada tampilan dibrowser, dan ClickMenya di tekan, tulisannya akan berubah menjadi "Wow!! Sudah berubah!! Amazing!!", berikut tampilan scriptnya :

Sekarang kita jalankan semuanya dibrowser, makan hasilnya akan seperti ini :

Selanjutnya, sekarang saya akan mencoba menyisipkan script baru dibutton "ClickMe" dimana ketika diklik, dia akan mengetahui ada berapa banyak jumlah paragraph yang saya tulis dan disisipkan di html. Berikut tampilan gambr scriptnya :

Ketika dijalankan, hasilnya seperti berikut pada browser :

Ketika diklik "ClickMe"nya, langsung muncul window alert yang bertuliskan "3". Artinya, dia membaca bahwa didalam html tersebut terdapat 3 paragraf.

Sekarang saya akan menunjukkan lagi bagaimana ketika diklik buttonnya, window alert akan menampilkan sis html dari second paragraph. Disni saya akan menggunakan array. berikut tampilan scriptnya :

Saya jalankan script tersebut di web browser, maka hasil tampilannya akan seperti berikut :

Ketika diklik "ClikMe"nya, dia menampilkan window alert yang berisikan isian dari htmp paragraph kedua.


Demikian postingan saya ini mengenai Document Object Model, mudah-mudahan cukup membantu. Jika ada kekurangan, saya memohon maaf sebesar-besarnya, karena saya juga masih mempelajari DOM ini. Sebagai tambahan, silakan tonton video ini, karena cukup menarik dan sangat bagus untuk mempelajari DOM.

Source Video : http://www.youtube.com/watch?v=LsY2PsPKckU