DOM Document Object Model Intro DOM By Augury
DOM (Document Object Model Intro DOM By: Augury El Rayeb
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 Intro DOM • Hirarki Object Model pada DOM • DOM & Javascript
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM • hirarki object model pada browser: window document Body Style Event Frame History Location Navigator Screen
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM • Contoh object model pada dokumen HTML
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM dan Javascript • Property dan Method pada Object Document: ▫ ▫ ▫ Method document. write() Method document. create. Element() Method document. get. Element. By. Id() Method document. get. Elements. By. Class. Name() Method document. get. Elements. By. Tag. Name()
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM dan Javascript • Property dan Method pada Object Document: ▫ Method document. write() Contoh: <script> function ubah() { document. write("What is Java. Script? "); document. write("<p><br/>How to work with Java. Script? ", "<br/>What is j. Query? </p>"); document. write("<div>Hello Madhav</div>") } </script> <body> <div id="no. Satu" class="awal">Teks Awal</div> <button onclick="ubah(); ">Click Me</button> </body>
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM dan Javascript • Property dan Method pada Object Document: ▫ Method document. create. Element() Contoh: <script> var div. Tambahan = document. create. Element('div'); div. Tambahan. id="id. Div. Baru"; div. Tambahan. inner. Text = "ini DIV tambahan"; document. body. append. Child(div. Tambahan); </script>
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM dan Javascript • Property dan Method pada Object Document: ▫ Method document. get. Element. By. Id() Contoh: <script> function ubah() { document. get. Element. By. Id("no. Satu"). inner. Text='Teks Baru'; } </script> <body> <div id=“no. Satu">Teks Awal</div> <button onclick=“ubah(); ">Click Me</button> </body>
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM dan Javascript • Property dan Method pada Object Document: ▫ Method document. get. Elements. Class. Name() Contoh: <script> function ubah() { document. get. Elements. By. Class. Name("awal")[0]. inner. Text='Tek s Baru'; } </script> <body> <div id="no. Satu" class="awal">Teks Awal</div> <button onclick="ubah(); ">Click Me</button> </body>
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 DOM dan Javascript • Property dan Method pada Object Document: ▫ Method document. get. Elements. Tag. Name() Contoh: <script> function ubah() { document. get. Elements. By. Tag. Name(“div")[0]. inner. Text='Teks Baru'; } </script> <body> <div id="no. Satu" class="awal">Teks Awal</div> <button onclick="ubah(); ">Click Me</button> </body>
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 Terima Kasih
Augury El Rayeb, S. Kom. , MMSI. Pengolahan Informasi Berbasis Script | INS 207 Referensi • Augury, et. al, “Cara mudah membuat web dengan penguasaan CSS dan HTML”, Andi Publishing, 2009. • Molly E. Holzschlag, “Core CSS: Part 2”, DZone Refcardz, Dzone Inc, 2008.
- Slides: 12
