Skip to content

Latest commit

 

History

History

DOM

README.md

Document Object Model

(DOM)

Preview Materi

Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur dan style pada situs web. Pada folder ini kita akan mempelajari apa itu DOM, bagaimana cara kita untuk memanipulasi DOM menggunakan Javascript. Sebelum memasuki DOM, diharapkan sudah memahami basic dari HTML-CSS dan Javascript, jika belum bisa terlebih dahulu untuk mempelajari basic dari HTML dan Javascript.

Tools yang digunakan

  • Komputer yang memiliki akses internet dengan sistem operasi Windows/Linux/Mac.
  • Spesifikasi minimal komputer
    • Sistem Operasi
      Windows, Linux dan MacOS.
    • Prosesor
      Intel Celeron atau yang setara. (Rekomendasi Intel Core I3 dan AMD A4 atau yang setara)
    • RAM : 2 GB. (Rekomendasi 4 GB)
  • Software
    • Teks Editor : VSCode, Sublime Text, Notepad++, Atom, Vim, dll.
    • Command Line : Terminal atau cmd, Git Bash, dll.
    • Install NodeJS. Cara Install (Jika sudah menginstall, tidak perlu melakukan installasi lagi)

Apa saja yang ada di folder ini?

  1. Introduction
    Penjelasan mengenai DOM dan jenis dari DOM Selector, antara lain document.getElementById(), document.getElementByClassName, document.getElementByTagName, document.querySelector, document.querySelectorAll.
  2. DOM Nodes
    Mengenal Javascript DOM Nodes dan tipe dari Node itu sendiri.
  3. Collections
    Penjelasan DOM Collections serta cara penggunaannya.
  4. Method
    Penjelasan tentang apa itu DOM Method, dan cara penggunaannya. Beberapa Method yang dapat digunakan untuk melakukan DOM seperti .innerHTML, .style, .setAttribute(), dan .classList().
  5. Events
    Mengenal apa itu DOM Events, dan mengetahui Event apa saja yang terdapat pada DOM Event tersebut.

  6. Event Listener

  7. Traversal
    Penjelasan mengenai DOM Traversal, dan mengenal 6 metode dari penelusuran DOM, yaitu .parentElement(), .parentNode(), .nextSibling(), .nextElementSibling(), .previousSibling(), dan .previousElementSibling().

  8. Event Bubbling

  9. Nodelist
    Mengenal DOM Nodelist serta studi kasus dan cara penggunaannya.