Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

HTML DOM Document Object Model Javascript Document Object Model

Presentasi serupa


Presentasi berjudul: "HTML DOM Document Object Model Javascript Document Object Model"— Transcript presentasi:

1 HTML DOM Document Object Model Javascript Document Object Model

2 Pendahuluan HTML DOM mendefinisikan cara untuk memanipulasi dan mengakses HTML Document. 06/04/2017 By : Suwondo, S.Kom

3 DOM Node Menurut DOM, segala sesuatu dalam sebuah dokumen HTMLadalah 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 <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. 06/04/2017 By : Suwondo, S.Kom

4 DOM Method 06/04/2017 By : Suwondo, S.Kom

5 DOM How To Merubah HTML Element Contoh : <html> <body> <script type="text/javascript"> document.body.bgColor="lavender"; </script> </body> </html> 06/04/2017 By : Suwondo, S.Kom ", "description": "06/04/2017. By : Suwondo, S.Kom.", "width": "800" }

6 DOM How To Merubah 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> 06/04/2017 By : Suwondo, S.Kom 06/04/2017. By : Suwondo, S.Kom.", "width": "800" }

7 DOM How To Menggunakan Object Style Contoh : <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> 06/04/2017 By : Suwondo, S.Kom 06/04/2017. By : Suwondo, S.Kom.", "width": "800" }


Download ppt "HTML DOM Document Object Model Javascript Document Object Model"

Presentasi serupa


Iklan oleh Google