Slide Perkuliahan tentang Document Object Model

1. Pemrograman Web
DOM

2. DOM (Document Object Model)
• Merupakan programming interface untuk
dokumen HTML, XML dan SVG yang memberikan
representasi dokumen secara terstruktur berupa
sekumpulan node dan objek.
• Node bisa memiliki event handlers yang dikaitkan
dengan node tersebut
– Event handler dieksekusi jika event ditrigger
• Pada dasarnya DOM menghubungkan halaman
web dengan bahasa pemograman.
– Umumnya javascript.

3. Bagian DOM
• DOM Core - model standar untuk dokumen
terstruktur
• XML DOM - model standar untuk dokumen
XML
• HTML DOM - model standar untuk dokumen
HTML

4. paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

5. DOM Nodes
• Seluruh dokumen adalah node dokumen
• Setiap elemen HTML adalah node elemen
• Teks di dalam elemen HTML node teks
• Setiap atribut HTML adalah node atribut
• Komentar adalah node komentar

7. Parent, Child, Sibling

8. DOM interfaces

9. HTML Interfaces
• Menggunakan HMTLDocument
• Extend Document interface
• Object HTMLDocument juga memberikan
akses terhadap browser seperti tab, window,
Style, History

10. Bisa apa menggunakan DOM??
• Membuat element baru (objek)
• Memanipulasi elemen (objek)
• Menghapus elemen (object)

11. HTML DOM Methods
• Methods
– Tindakan yang dapat dilakukan terhadap sebuah node
• Programming Interface
• HTML DOM dapat diakses dengan JavaScript
• Semua elemen HTML didefinisikan sebagai objects
– Method (metode) adalah suatu tindakan yang dapat Anda
lakukan (seperti menambahkan atau memodifikasi
elemen).
– Property (properti) adalah nilai yang Anda bisa dapatkan
atau atur (seperti nama atau isi dari sebuah node).

12. Methods dan Properties
• Beberapa metode HTML DOM:
– getElementById(id) – get (mendapatkan) node (elemen)
dengan id tertentu
– appendChild(node​​) – insert (menyisipkan) node anak baru
(elemen)
– removeChild(node​​) – remove (menghapus) child node
(elemen)
• Beberapa property HTML DOM :
– innerHTML – nilai teks dari node (elemen)
– parentNode – parent node dari node (elemen)
– childNodes – child node dari node (elemen)
– attributes – attributes node dari node (elemen)

13. Method Description
getElementById() Mengembalikan elemen yang memiliki atribut ID dengan sebuah
nilai
getElementsByTagName() Mengembalikan daftar node (collection/array of nodes) yang
mengandung semua elemen dengan nama tag yang ditentukan
getElementsByClassName() Mengembalikan daftar node yang berisi semua elemen dengan
kelas tertentu
appendChild() Menambahkan node child baru ke node tertentu
removeChild() Removes a child node
replaceChild() Replaces a child node
insertBefore() Inserts a new child node sebelum child node ditentukan
createAttribute() Creates an Attribute node
createElement() Creates an Element node
createTextNode() Creates a Text node
getAttribute() Mengembalikan nilai atribut yg ditentukan
setAttribute() Sets or changes the specified attribute, to the specified value

14. Properties
• InnerHTML
– Teks dalam elemen
• nodeName
– nodeName adalah read-only
– nodeName dari node elemen adalah sama seperti nama tag
– nodeName dari node atribut adalah nama atribut
– nodeName dari node teks selalu #text
– nodeName dari node dokumen selalu #document
• nodeValue
– nodeValue untuk node elemen tidak terdefinisi
– nodeValue untuk node teks adalah teks itu sendiri
– nodeValue untuk node atribut adalah nilai atribut

15. • NodeType
– Element (1)
– Attribute (2)
– Text (3)
– Comment (8)
– Document (9)

16. HTML DOM Access
• menggunakan getElementById()
• menggunakan getElementsByTagName()
• menggunakan getElementsByClassName()

17. Menciptakan elemen

18. Mengakses elemen

19. Menghapus Elemen

20. HTML DOM – Events
• HTML DOM memungkinkan JavaScript untuk
bereaksi terhadap event HTML.