HTML DOM

1
HTML DOM
Document Object Model

• Document Object Model

Document Object Model
Javascript
Document Object Model
2
Pendahuluan

• HTML DOM mendefinisikan cara untuk memanipulasi
  dan mengakses HTML Document.

3
DOM Node

• Menurut DOM, segala sesuatu dalam sebuah dokumen H
  TMLadalah sebuah node. DOM mengatakan
• Seluruh dokumen adalah node dokumen
• Setiap elemen HTML adalah node elemen
• Teks dalam elemen HTML adalah node teks
• Setiap atribut HTML adalah atribut node
• Komentar node komentar
• lthtmlgt  ltheadgt    lttitlegtDOM Tutoriallt/titlegt  
  lt/headgt  ltbodygt    lth1gtDOM Lesson
  onelt/h1gt    ltpgtHello world!lt/pgt  lt/bodygtlt/htmlgt
  
• Root Node adalah lthtmlgt
• lthtmlgt mempunyai dua anak node yaitu ltheadgt dan
  ltbodygt
• ltheadgt mempunyai node lttitlegt dan ltbodygt
  mempunyai lth1gt dan ltpgt node.
• Isi text yang ada pada node ltpgt atau lth1gt dapat
  diakses dengan value atau innerHTML.

4
DOM Method

5
DOM How To

• Merubah HTML Element
• Contoh
• lthtmlgtltbodygtltscript type"text/javascript"gtdocu
  ment.body.bgColor"lavender"lt/scriptgtlt/bodygtlt/
  htmlgt

6
DOM How To

• Merubah isi text dalam HTML Element.
• Contoh
• lthtmlgtltbodygtltp id"p1"gtHello
  World!lt/pgtltscript type"text/javascript"gtdocume
  nt.getElementById("p1").innerHTML"New
  text!"lt/scriptgtlt/bodygtlt/htmlgt

7
DOM How To

• Menggunakan Object Style
• Contoh
• lthtmlgtltheadgtltscript type"text/javascript"gtfunc
  tion ChangeBackground()document.body.style.back
  groundColor"lavender"lt/scriptgtlt/headgtltbody
  gtltinput type"button" onclick"ChangeBackground()
  "value"Change background color"
  /gtlt/bodygtlt/htmlgt