html dom

7
HTML DOM HTML DOM Document Object Document Object Model Model

Upload: roden

Post on 11-Jan-2016

67 views

Category:

Documents


0 download

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

TRANSCRIPT

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