Langsung ke konten utama

Javascript: DOM Intro

 Document Object Model (DOM)

Assalamualaikum wr wb. Kembali lagi dengan saya Haikal dengan materi baru tentang Javascript DOM. 

DOM Tree

Ketika halaman HTML atau website di load. Browser akan membuat sebuah DOM (Document Object Model) dan Document terdiri dari DOM Tree yang berisi tag-tag HTML yang saling membungkus satu sama lain. Contohnya seperti diatas. Browser membuat Document lalu berisikan root element berupa tag <html> dan html membungkus <head> dan <body>. Dengan ini bisa diketahui bahwa

  • Javascript dapat mengubah element HTML yang berada di dalam halaman
  • Javascript dapat mengubah attribute HTML yang berada di dalam halaman
  • Javascript dapat mengubah style CSS
  • Javascript dapat menghapus dan membuat element HTML
  • Javascript dapat mereaksi event yang terjadi di halaman
  • Javascript dapat membuat event pada element HTML dalam halaman

Terlihat bahwa DOM ini sangat berguna sekali untuk membuat halaman website menjadi dinamis dan interaktif. 

 

    Di materi ini kita akan mempelajari:

  • Bagaimana cara mengubah element atau attribute HTML dengan JS HTML DOM.
  • Bagaimana cara mengubah style CSS mengunakan JS HTML DOM.
  • Bagaimana JS HTML DOM mereaksi event.
  • Bagaimana cara menambahkan dan menghapus element HTML.

 

Sebenarnya apa sih itu DOM? Bedanya apa dengan HTML DOM?

DOM merupakan sebuah W3C (World Wide Web Consortorium) Standar. DOM didefinisikan sebagai standar untuk mengakses dokumen. Dibagi menjadi 3:

  1. Core DOM - Untuk semua tipe standar dokument
  2. XML DOM - Standar model untuk XML (eXtensible Markup Language)
  3. HTML DOM - Standar model untuk HTML (Hypertext Markup Language)

 Yang akan kita pelajari yaitu HTML DOM yang dengan kata lain "cara membuat, mengambil, mengubah, dan menghapus HTML element".

Contohnya seperti ini:

HTML

JS

 Maksud dari kode diatas adalah kita membuat file HTML yang terhubung dengan script javascript. Lalu kita membuat sebuah paragraf kosong dengan attribute id "paragraf". Di dalam kode javascript kita mengambil object tersebut dengan "document.getElementById('paragraf')" lalu disimpan pada sebuah variabel. Kemudian kita munculkan didalam konsole. Maka hasilnya:


Sebuah dokumen object <p> ditampilkan. Dengan begini kita dapat mengubah isi atau bahkan menghapus paragraf tersebut. Contoh saja, kita belum mengisi teks apapun lalu kita ingin membuatnya dinamis dengan javascript HTML DOM. Untuk melakukannya teman-teman dapat menggunakan .innerHTML atau masih banyak yang lain tapi kita akan gunakan opsi yang pertama. Coba ubah kode javascript kalian menjadi seperti ini:

Lalu hasilnya akan seperti ini:


tag <p> terisi dan kita berhasil menambahkan teks pada paragraf. Dengan begini kita dapat membuat sebuah halaman website yang dinamis. Contohnya kita mengambil data dari public API. Lalu kita fetch data tersebut dengan Javascript HTML DOM ini.


Mungkin sekian untuk materi kali ini, Sampai jumpa lagi, Wassalamualaikum wr wb.

 

Komentar

Posting Komentar

Postingan populer dari blog ini

Javascript: DOM Document

 Document Assalamualaikum wr wb. Halo teman-teman gimana kabarnya? semoga sehat selalu dan bisa menjalani aktifitas dengan lancar. Yap, kita kembali lagi berjumpa di materi javascript dom melanjutkan materi sebelumnya. Bagi teman-teman yang belum mengikuti materi sebelumnya, saya sarankan untuk dibaca terlebih dahulu.   DOM Document Seperti pengertian sebelumnya, HTML DOM merupakan sebuah dokumen objek yang merepresentasikan halaman website. Dengan begitu kita dapat mengubah, menghapus dan membuat elemen dan attributnya ataupun value dari tag HTML. Seperti sebelumnya kita menggunakan  innerHTML untuk megisi konten dari tag <p>. Sekarang kita akan mencoba menggunakan method lain untuk mengakses DOM. Mencari Elemen / Tag HTML document.getElementById('nama_id'); document.getElementsByClassName('nama_class'); document.getElementsByTagName('nama_tag'); Untuk mencari elemen dengan classname dan tagname sebenarnya hampir mirip. Karena banyak tag bisa menggunakan ...
Posting Komentar
Baca selengkapnya

Javascript: Operator Arithmetic

Operator Arithmetic   Halo teman-teman, kembali lagi dengan saya haikal pada materi javascript dasar. Materi ini akan berkaitan dengan materi sebelumnya yaitu dengan data type dan variable bagi yang belum mengikuti materi sebelumnya boleh dibaca terlebih dahulu linknya Javascript: Data Types and Variable . Nah, pada hari ini kita akan mempelajari sebuah operasi aritmatika pada bahasa javascript. Lah, kan katanya kemarin mau ngebahas tentang function dan object?. Sabar gan, kita belajar dulu dari dasarnya karena untuk materi function dan object cukup kompleks. Karena materi ini juga tak kalah menarik. Ok mari kita masuk ke materinya!. Pasti teman-teman udah tau dong apa itu aritmatika. Yap! aritmatika seperti pejumlahan, pengurangan, pembagian, perkalian dan modulus. Dalam bahasa javascript kita dapat penghitung dengan operasi ini. Langung saja kita peraktikan. Penjumlahan Pertama-tama teman-teman buat terlebih dahulu file html dan javascriptnya karena kita akan menggunakan console...
Posting Komentar
Baca selengkapnya

Javascript: 5 Website Untuk Mengasah Analisis dan Problem Solving

 Assalamualaikum wr wb. Halo guys kembali lagi dengan saya Haikal. Kali ini saya akan sharing website-website yang kalian harus tahu untuk mengasah problem solving dan analisis yang dibutuhkan dalam sebuah coding. Berikut daftar websitenya A great way to improve your skills when learning to code is by solving coding challenges. Solving different types of challenges and puzzles can help you become a better problem solver, learn the intricacies of a programming language, prepare for job interviews, learn new algorithms, and more.    1. TopCoder   TopCoder adalah sebuah platform untuk mengasah skill competitive programming online. Menyediakan sebuah masalah-masalah dan tantangan algoritma yang harus kalian pecahkan dengan online teks editor. Memiliki fitur scoring dimana para peserta dapat berlomba-lomba untuk mendapatkan score yang tinggi. 2. LeetCode   Leetcode juga tidak kalah dengan website lainnya. Memiliki banyak masalah-masalah algoritma dari mulai yang ...
Posting Komentar
Baca selengkapnya