Javascript DOM

00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:

  • JavaScript Dasar
  • JavaScript Object Oriented Programming
  • JavaScript Standard Library
  • JavaScript Modules

01. Pengenalan Document Object Model

Pengenalan DOM
  • Ketika sebuah website di load oleh Browser, maka Browser akan membuat Document Object Model untuk halaman website tersebut
  • DOM dibuat dalam bentuk tree / pohon yang tiap cabang nya berisikan object dari jenis elemen HTML
  • JavaScript memiliki kemampuan untuk memanipulasi DOM, artinya dengan JavaScript, kita bisa mengakses tiap object di DOM bahkan memanipulasi object nya

DOM dan Javascript
  • DOM bukanlah fitur atau bahasa pemrograman, DOM sebenarnya hanyalah representasi Object dari Struktur halaman web
  • DOM sendiri sebenarnya bukanlah bagian dari bahasa pemrograman JavaScript, melainkan bagian dari Web API
  • DOM sendiri di desain secara agnostik, artinya sebenarnya bisa digunakan menggunakan bahasa pemrograman apapun, karena memang untuk membuat Web, kita tidak hanya bisa menggunakan bahasa pemrograman JavaScript

Tipe Data
  • DOM memiliki representasi data
  • Tidak terlalu banyak tipe data yang terdapat di DOM
  • Oleh karena itu, sebenarnya DOM sangat sederhana, namun penggunaannya sangat bermanfaat


02. Document
  • Document merupakan representasi object dari halaman web
  • Dalam satu halaman web, terdapat satu document, dan kita tidak perlu membuatnya secara manual, karena otomatis akan ada di browser
  • Untuk mengakses Document, kita bisa gunakan object document
  • https://developer.mozilla.org/en-US/docs/Web/API/Document 

Document Object
  • Document secara otomatis dibuat dalam browser ketika membuka halaman web, sehingga kita tidak perlu membuat objek Document secara manual
  • Kita bisa langsung menggunakan kata kunci document

lihat console:


03. Document property
  • Document memiliki banyak sekali property
  • Property dalam Document bisa kita gunakan untuk melihat semua data yang terdapat dalam document halaman web
  • https://developer.mozilla.org/en-US/docs/Web/API/Document#properties 


lihat console:


04. Document method
  • Document memiliki banyak sekali method
  • Banyak method yang terdapat di document digunakan untuk memanipulasi data DOM, misal membuat Node, Element, Attribute atau mengambil dan menyeleksi Node di dalam document
  • https://developer.mozilla.org/en-US/docs/Web/API/Document#methods 


lihat console:


05. Node
  • Node adalah base class dari Document, Element dan Attr
  • Artinya semua fitur yang dimiliki di Node dimiliki diturunannya
  • Node dalam DOM itu bentuknya adalah Tree (pohon), artinya dengan Node, kita bisa melihat Parent (node diatas nya), Children (node dibawahnya), Sibling (node disebelahnya)
  • https://developer.mozilla.org/en-US/docs/Web/API/Node 


lihat console:


06. Node property
  • Node memiliki banyak sekali property
  • Property di Node banyak berisi informasi reference ke Node lain nya, seperti ke node parent nya, node children nya atau node sebelahnya
  • https://developer.mozilla.org/en-US/docs/Web/API/Node#properties 


lihat console:


07. Node method
  • Node memiliki banyak sekali method
  • Method di Node bisa digunakan untuk memanipulasi data Node di dalam Node tersebut, misal menambah/menghapus Node children
  • https://developer.mozilla.org/en-US/docs/Web/API/Node#properties 

08. Element
  • Element merupakan Node yang berbentuk element, biasanya adalah element HTML, misal <html>, <head>, <body>, <div>, <table>, dan lain-lain
  • https://developer.mozilla.org/en-US/docs/Web/API/Element 

09. Element property
  • Element memiliki banyak sekali property
  • Dan karena Element adalah turunan dari Node, semua property Node pun bisa digunakan di Element
  • https://developer.mozilla.org/en-US/docs/Web/API/Element#properties 

10. Element method
  • Element memiliki banyak sekali method
  • Dan karena Element adalah turunan dari Node, semua method Node pun bisa digunakan di Element
  • https://developer.mozilla.org/en-US/docs/Web/API/Element#methods 

11. Membuat Element
  • Sebelumnya kita hanya mengambil element menggunakan id, artinya kita perlu buat dulu element nya di HTML
  • Kita juga bisa membuat object element baru, dan menambahkannya ke halaman web
  • Kita bisa menggunakan method createElement(tag) pada Document
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement 

12. Nodelist
  • NodeList adalah kumpulan dari Node
  • Biasanya NodeList digunakan ketika kita menyeleksi banyak Node sekaligus, misal ketika kita ingin mengambil semua children di Node misalnya
  • https://developer.mozilla.org/en-US/docs/Web/API/NodeList 


lihat console:


13. Nodelist Live dan Static
  • NodeList memiliki 2 tipe, yaitu Live dan Static
  • Live artinya perubahan yang terjadi pada NodeList nya, akan merubah semua NodeList yang sama
  • Static artinya perubahan yang terjadi pada NodeList nya, tidak akan merubah semua NodeList yang sama
  • Saat kita menggunakan element.childNodes, NodeList tersebut bersifat Live
  • Saat kita menggunakan document.querySelectorAll(), NodeList tersebut bersifat Static

Nodelist Live
 

lihat console:


Nodelist Static
  

lihat console:


14. Attribute
  • Attr atau attribute merupakan representasi dari attribute sebuah element, atau singkatnya key-value, key nya adalah nama attribute, dan value nya adalah value attribute
  • https://developer.mozilla.org/en-US/docs/Web/API/Attr 

Attribute value
  • Kadang kebanyakan programmer ingin langsung mendapatkan value Attr 
  • Jarang sekali menggunakan object Attr nya
  • Untuk mendapatkan value secara langsung, kita bisa menggunakan method getAttribute(name) di Element

15. Membuat Attribute
  • Untuk membuat Attr, kita bisa menggunakan document.createAttribute(name)
  • Lalu untuk menambahkannya ke Element, kita bisa gunakan element.setAttributeNode(attr)
  • Atau kita juga bisa langsung membuat Attr langsung dengan name dan value nya menggunakan element.setAttribute(name, value)

16. NamedNodeMap
  • NamedNodeMap merupakan kumpulan dari Attr
  • Mirip seperti NodeList, namun isinya adalah Attr
  • https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap 


lihat console:


17. Text Node
  • Saat kita membuat HTML, kadang kita membuat teks tanpa tag
  • Saat halaman web tersebut direpresentasikan dalam DOM, text tanpa tag bukanlah merupakan Element, melainkan Node
  • Lebih tepatnya adalah Text Node
  • https://developer.mozilla.org/en-US/docs/Web/API/Text 

18. Membuat Text Node
  • Kita juga bisa membuat Text Node menggunakan method document.createTextNode(string)
  • Hasilnya berupa Text yang bisa kita tambahkan ke Node lain

19. Event Handler
  • Node memiliki kemampuan bereaksi terhadap suatu kejadian, misal kejadian di klik, mouse di atas node tersebut, dan lain-lain
  • Ada banyak sekali jenis kejadian yang bisa kita buatkan aksinya ketika kejadian tersebut terjadi, atau dikenal dengan nama Event Handler
  • Ada dua cara kita menambahkan Event Handler ke Node, menggunakan Event Target atau Global Event Handler
  • https://developer.mozilla.org/en-US/docs/Web/API/EventTarget 
  • https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers 

20. Event Target  
  • Event Target merupakan parent class dari Node, artinya semua Node memiliki kemampuan dari Event Target
  • Pada Event Target, kita bisa menggunakan method addEventListener(type, callback) untuk menambahkan Event Handler
  • https://developer.mozilla.org/en-US/docs/Web/API/EventTarget 

21. Global Event Handler
  • Selain menggunakan Event Target, untuk menambahkan Event Handler, kita juga bisa menggunakan Global Event Handler
  • Global Event Handler bukanlah sebuah super class, hanya kontrak yang bisa kita gunakan untuk menambah event handler sesuai dengan type event nya
  • https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers 

22. Event

Jenis Event
  • DOM sendiri memiliki banyak sekali jenis event, tidak hanya click
  • Jenis event yang bisa kita gunakan biasanya disesuaikan dengan target event nya, misal pada element video, ada event play, pause, sedangkan pada element button, tidak ada event play atau pause
  • Untuk lebih detailnya, ada apa saja jenis event nya, kita bisa lihat pada halaman berikut :https://developer.mozilla.org/en-US/docs/Web/Events 

Event
  • Saat kita membuat callback function untuk Event Handler, kita juga bisa menerima data event yang memicu event itu terjadi
  • Data Event tersebut bisa berbeda-beda, tergantung jenis Event nya, contohnya untuk Click, data event nya berupa Mouse Event (yang berisi lokasi mouse dan lain-lain)
  • Kita bisa lihat detail dari data tiap event di halaman documentation nya :https://developer.mozilla.org/en-US/docs/Web/API/Event 

23. Style
  • DOM juga bisa digunakan untuk memanipulasi attribute style pada element dengan lebih mudah
  • Kita tidak perlu menggunakan setAttribute(“style”, “value”) setiap ingin mengubah style sebuah element
  • Kita bisa langsung gunakan element.style.name = value
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style 

Name Style
  • Saat kita mengubah sebuah style, penamaan style menjadi berubah
  • Pada style css, rata-rata menggunakan format lowercase dan -, misal background-color
  • Sedangkan pada DOM Style, menggunakan format pascalCase, misal backgroundColor

24. Text Content dan Inner Text
  • Selain textContent, terdapat property lain bernama innerText untuk mendapatkan isi text sebuah element
  • Tujuan nya sama, untuk mengambil atau mengubah isi text konten sebuah element, namun ada perbedaannya
  • textContent akan mengembalikan semua isi dari konten text sebuah element
  • innerText bisa tahu, bagian text mana yang ditampilkan, dan dia hanya akan mengambil text yang ditampilkan saja


lihat console:


25. Inner HTML
  • Jika Text Content dan Inner Text hanya mengambil text saja, Inner HTML akan mengambil seluruh element HTML nya sebagai text
  • Ini juga cocok jika kita ingin mengubah isi dari element menggunakan text yang berisi tag HTML

Mengubah Element Dengan Inner HTML
  • Salah satu kemampuan dari innerHTML adalah, kita bisa mengubah isi dari children sebuah element hanya dengan string 
  • Tag yang terdapat di dalam String secara otomatis akan menjadi child element

26. Window
  • Window merupakan representasi window yang berisikan DOM Document
  • Beberapa JavaScript function sebenarnya berasal dari object Window, seperti alert(), confirm() dan prompt()
  • Ada banyak sekali property, method  dan event yang bisa kita gunakan pada window
  • Untuk menggunakan Window, kita tidak perlu membuat objectnya, cukup gunakan kata kunci window
  • https://developer.mozilla.org/en-US/docs/Web/API/Window 

27. Query Selector
  • Sebelumnya kita sudah menggunakan method querySelectorAll() pada Document, sekarang kita akan bahas lebih lengkap tentang Query Selector
  • Query Selector merupakan method untuk menseleksi node sesuai dengan pola yang kita ingin cari
  • Terdapat dua method untuk Query Selector :
  • Document.querySelector(pola) digunakan menyeleksi node pertama yang sesuai dengan pola
  • Document.querySelectorAll(pola) digunakan untuk menyeleksi semua node yang sesuai dengan pola

Pola Query Selector
  • Pola untuk Query Selector adalah menggunakan CSS Selector
  • Penggunakan Pola nya mirip ketika kita membuat Selector di CSS
  • Jika belum tahu tentang CSS Selector, disarankan untuk dipelajari ulang tentang materi CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 

28. Query selector: Universal selector
  • Universal Selector merupakan selector untuk menyeleksi semua element
  • Kita bisa menggunakan karakter *
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors 


lihat console:


29. Query selector: Type selector
  • Type Selector adalah selector yang digunakan untuk menyeleksi  tag type HTML yang kita pilih
  • Untuk menggunakannya, kita bisa langsung sebutkan nama tag nya
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors 


lihat console:


30. Query selector: Class selector
  • Class Selector merupakan selector untuk menyeleksi semua element yang memiliki class yang sesuai selector
  • Untuk menggunakannya, kita bisa sebutkan nama class nya diawali dengan titik
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors 


lihat console:



31. Query selector: ID selector
  • ID Selector merupakan selector yang digunakan untuk menyeleksi id yang sesuai selector
  • Untuk menggunakannya, kita bisa gunakan nama id diawali dengan karakter #
  • https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors 


lihat console:



32. Query selector: Attribute selector
  • Attribute Selector merupakan selector yang bisa digunakan untuk menyeleksi element berdasarkan attribute nya
  • Kita bisa menggunakan selector [attribute]
  • Atau bisa juga untuk tag tertentu, misal menggunakan selector div[attribute]
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors 


lihat console:



33. Query selector: Operator di Attribute Selector
  • Kita juga bisa menggunakan operator pada attribut selector
  • Misal [attribute=value], [attribute^=value] dan lain-lain
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax 


lihat console:


Dan Selector Lainnya:
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 

34. Node type
  • Saat kita menyeleksi Node menjadi NodeList, kadang kita ingin tahu tipe Node tersebut
  • Apakah Element, TextElement atau yang lainnya
  • Node sendiri memiliki property bernama nodeType, dimana kita bisa melihat tipe dari node tersebut
  • https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType 


lihat console:


35. HTML element
  • Element merupakan representasi dalam DOM
  • Namun, saat menggunakan HTML, implementasi detail nya sebenarnya adalah HTML Element, yaitu turunan dari Element
  • HTML Element memiliki banyak sekali property dan method tambahan selain dari Element DOM
  • Kebanyakan HTML Element memiliki property yang sesuai dengan attribute yang ada pada tag html tersebut, oleh karena itu, kadang kita tidak butuh lagi menggunakan method setAttribute dan getAttribute
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement 

36. HTML form element
  • Form adalah salah satu element yang memiliki banyak sekali fitur diluar dari Element DOM
  • Hal ini karena penggunaan Form memang lebih kompleks dibandingkan element HTML lainnya
  • Ada banyak sekali property, method dan juga event yang terdapat pada HTML form element atau input element
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement 
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement 

Akses Form via Name
  • Salah satu kelebihan Form adalah, kita bisa mengakses form hanya dengan menggunakan form name
  • Kita bisa gunakan document.forms[name]
  • Atau jika kita ingin mengakses input nya, kita juga bisa menggunakan name nya document.forms[name][inputName]

37. HTML form2

38. HTML table element
  • Salah satu HTML Element yang kompleks selain Form adalah Table
  • HTML Table Element juga memiliki banyak sekali property, method dan event yang khusus
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement 


lihat console:



HTML Element Lainnya:
  • Sebenarnya masih banyak element-element HTML lainnya yang terdapat dalam Standard Web API
  • Namun akan terlalu banyak jika dibahas satu per-satu
  • Oleh karena itu saya sarankan teman-teman eksplore HTML element yang memang ingin dipelajari di halaman documentation resminya 
  • https://developer.mozilla.org/en-US/docs/Web/API#interfaces 

Source: Youtube Programmer Zaman Now