7
HTML DOM HTML DOM Document Object Document Object Model Model

HTML DOM

  • Upload
    roden

  • View
    62

  • Download
    0

Embed Size (px)

DESCRIPTION

HTML DOM. Document Object Model. Document Object Model. Document Object Model. Javascript. Document Object Model. Pendahuluan. HTML DOM mendefinisikan cara untuk memanipulasi dan mengakses HTML Document. DOM Node. - PowerPoint PPT Presentation

Citation preview

Page 1: HTML DOM

HTML DOMHTML DOMDocument Object ModelDocument Object Model

Page 2: HTML DOM

PendahuluanPendahuluanHTML DOM mendefinisikan cara untuk memanipulasi dan mengakses HTML Document.

21/04/23 2By : Suwondo, S.Kom

Page 3: HTML DOM

DOM NodeDOM NodeMenurut DOM, segala sesuatu dalam sebuah dokumen HTMLadalah sebuah node. DOM mengatakan:oSeluruh dokumen adalah node dokumenoSetiap elemen HTML adalah node elemenoTeks dalam elemen HTML adalah node teksoSetiap atribut HTML adalah atribut nodeoKomentar node komentar

<html>  <head>    <title>DOM Tutorial</title>  </head>  <body>    <h1>DOM Lesson one</h1>    <p>Hello world!</p>  </body></html>

Root Node adalah <html>

<html> mempunyai dua anak node yaitu <head> dan <body>

<head> mempunyai node <title> dan <body> mempunyai <h1> dan <p> node.

Isi text yang ada pada node <p> atau <h1> dapat diakses dengan value atau innerHTML.

21/04/23 By : Suwondo, S.Kom 3

Page 4: HTML DOM

DOM MethodDOM Method

21/04/23 By : Suwondo, S.Kom 4

Page 5: HTML DOM

DOM How ToDOM How To

Merubah HTML Element

Contoh :

<html><body><script type="text/javascript">document.body.bgColor="lavender";</script></body></html>

21/04/23 By : Suwondo, S.Kom 5

Page 6: HTML DOM

DOM How ToDOM How ToMerubah isi text dalam HTML Element.Contoh :<html>

<body>

<p id="p1">Hello World!</p>

<script type="text/javascript">document.getElementById("p1").innerHTML="New text!";</script>

</body></html>

21/04/23 By : Suwondo, S.Kom 6

Page 7: HTML DOM

DOM How ToDOM How ToMenggunakan Object StyleContoh :<html>

<head><script type="text/javascript">function ChangeBackground(){document.body.style.backgroundColor="lavender";}</script></head>

<body><input type="button" onclick="ChangeBackground()"value="Change background color" /></body></html>

21/04/23 By : Suwondo, S.Kom 7