HTML DOM
70 likes | 300 Views
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.
HTML DOM
E N D
Presentation Transcript
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. By : Suwondo, S.Kom
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. By : Suwondo, S.Kom
DOM Method By : Suwondo, S.Kom
DOM How To Merubah HTML Element Contoh : <html><body><script type="text/javascript">document.body.bgColor="lavender";</script></body></html> By : Suwondo, S.Kom
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> By : Suwondo, S.Kom
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> By : Suwondo, S.Kom