Java Script HTML DOM D Sinaga M Kom

Apa itu DOM ? � Model Objek Dokumen W 3 C (DOM) adalah antarmuka

Apa itu HTML DOM? 1. 2. DOM HTML adalah model objek standar dan antarmuka

� Kita 1. 2. 3. 4. akan mempelajari : Bagaimana cara mengubah isi elemen

Java. Script - HTML DOM Methods � Metode HTML DOM adalah tindakan yang dapat

� <html> <body> <p id="demo"></p> <script> document. get. Element. By. Id("demo"). inner. HTML =

Window object- Bagian atas hierarki. Ini adalah elemen terluar dari hierarki objek. � Document

Metode Get. Element. By. Id � Cara yang paling umum untuk mengakses elemen HTML

� <!DOCTYPE html> <body> � <h 1 id="header">Old Header</h 1> � � � <script>

Ganti atribut � � � � � <!DOCTYPE html> <body> <img id="image" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="smiley. gif"

Properti inner. HTML � Cara termudah untuk mendapatkan konten elemen adalah dengan menggunakan inner.

Java. Script HTML DOM Document � Objek Dokumen DOM HTML � Objek dokumen mewakili

Menemukan Elemen HTML 1. 2. 3. 4. 5. 6. Menemukan kelas Menemukan CSS Menemukan

Contoh : Menemukan Element dengan Id � � � � <!DOCTYPE html> <body> <p

Finding HTML Elements by Tag Name (This example finds all <p> elements: ) �

� � � � � <!DOCTYPE html> <body> <p>Hello World!</p> <div id="main"> <p>The DOM

Finding HTML Elements by Class Name � jika kita ingin menemukan semua elemen HTML

Contoh : � � � � <!DOCTYPE html> <body> <p>Hello World!</p> <p class="intro">The DOM

Finding HTML Elements by HTML Object Collections � � � � � <!DOCTYPE html>

Contoh : var x = document. forms["frm 1"]; var text = ""; var i;

Java. Script HTML DOM - Changing CSS � To change the style of an

The following example changes the style of a <p> element: � � � <!DOCTYPE

Menggunakan Event � DOM HTML memungkinkan Anda mengeksekusi kode saat sebuah peristiwa terjadi. Acara

Contoh : � <!DOCTYPE <html> <body> html> <h 1 id="id 1">My Heading 1</h 1>

� Dengan HTML DOM, Java. Script dapat mengakses dan mengubah semua elemen dokumen HTML.

latihan � Buatlah program kecil untuk menampilkan data dari dosen dengan mengetikkan koden dosen,

Slides: 29

Download presentation

Java. Script HTML DOM D. Sinaga, M. Kom

Apa itu DOM ? � Model Objek Dokumen W 3 C (DOM) adalah antarmuka platform dan bahasa-netral yang memungkinkan program dan skrip untuk mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis. “ � Standar DOM W 3 C dipisahkan menjadi 3 bagian berbeda: 1. Model standar DOM inti untuk semua jenis dokumen 2. XML DOM - model standar untuk dokumen XML 3. HTML DOM - model standar untuk dokumen HTML

Apa itu HTML DOM? 1. 2. DOM HTML adalah model objek standar dan antarmuka pemrograman untuk HTML. Ini mendefinisikan: Elemen HTML sebagai objek Properti dari semua elemen HTMLMetode untuk mengakses semua elemen HTMLAcara untuk semua elemen HTML Dengan kata lain: DOM HTML adalah standar untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML.

The HTML DOM Tree of Objects

� Kita 1. 2. 3. 4. akan mempelajari : Bagaimana cara mengubah isi elemen HTML Cara mengganti style (CSS) dari elemen HTML Cara bereaksi terhadap aktivitas HTML DOM Cara menambah dan menghapus elemen HTML

Java. Script - HTML DOM Methods � Metode HTML DOM adalah tindakan yang dapat Anda lakukan (pada Elemen HTML). � Properti HTML DOM adalah nilai (dari Elemen HTML) yang dapat kita atur atau ubah. � Contoh : Contoh berikut mengubah konten (inner. HTML) elemen <p> dengan id = "demo":

� <html> <body> <p id="demo"></p> <script> document. get. Element. By. Id("demo"). inner. HTML = "Hello World!"; </body> </html> � </script> � Pada contoh di atas, get. Element. By. Id adalah sebuah metode, sedangkan inner. HTML adalah sebuah properti.

Window object- Bagian atas hierarki. Ini adalah elemen terluar dari hierarki objek. � Document object- Setiap dokumen HTML yang dimuat ke jendela menjadi objek dokumen. Dokumen berisi halaman. � Form control elements - Semua yang terlampir dalam tag <form>. . . </ form> menetapkan objek formulir. � Bentuk elemen kontrol - Objek formulir berisi semua elemen yang ditentukan untuk objek seperti bidang teks, tombol radio, dan kotak centang �

Metode Get. Element. By. Id � Cara yang paling umum untuk mengakses elemen HTML adalah dengan menggunakan id elemen. Pada contoh di atas, metode get. Element. By. Id menggunakan id = "demo" untuk menemukan elemennya.

� <!DOCTYPE html> <body> � <h 1 id="header">Old Header</h 1> � � � <script> var element = document. get. Element. By. Id("header"); element. inner. HTML = "Judul Baru"; </script> � <p>"Old Header" was changed to "New Header"</p> � � � </body> </html>

Ganti atribut � � � � � <!DOCTYPE html> <body> <img id="image" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="smiley. gif"

Ganti atribut � � � � � <!DOCTYPE html> <body> <img id="image" src="smiley. gif" width="160" height="120"> <script> document. get. Element. By. Id("image"). src = "landscape. jpg"; </script> <p>The original image was smiley. gif, but the script changed it to landscape. jpg</p> </body> </html> Dokumen HTML di atas berisi elemen <img> dengan id = "my. Image“ , menggunakan DOM HTML untuk mendapatkan elemen dengan id = "my. Image" Java. Script mengubah atribut src dari elemen itu dari "smiley. gif" menjadi "landscape. jpg"

Properti inner. HTML � Cara termudah untuk mendapatkan konten elemen adalah dengan menggunakan inner. HTML properti. Properti inner. HTML berguna untuk mendapatkan atau mengganti konten elemen HTML. �Properti inner. HTML dapat digunakan untuk mendapatkan atau mengubah elemen HTML, termasuk <html> dan <body>.

Java. Script HTML DOM Document � Objek Dokumen DOM HTML � Objek dokumen mewakili halaman web Anda. � Jika Anda ingin mengakses elemen apapun di halaman HTML, Anda selalu mulai dengan mengakses objek dokumen. � Berikut adalah beberapa contoh bagaimana Anda dapat menggunakan objek dokumen untuk mengakses dan memanipulasi HTML.

Menemukan Elemen HTML

Mengubah Unsur HTML

Menemukan Elemen HTML 1. 2. 3. 4. 5. 6. Menemukan kelas Menemukan CSS Menemukan objek HTML elemen HTML dengan id elemen HTML dengan nama tag elemen HTML dengan nama elemen HTML oleh penyeleksi elemen HTML dengan koleksi

Contoh : Menemukan Element dengan Id � � � � <!DOCTYPE html> <body> <p id="intro">Hello World!</p> <p>This example demonstrates the <b>get. Element. By. Id</b> method!</p> <p id="demo"></p> <script> var my. Element = document. get. Element. By. Id("intro"); document. get. Element. By. Id("demo"). inner. HTML = "The text from the intro paragraph is " + my. Element. inner. HTML; </script> </body> Jika elemen ditemukan, metode akan mengembalikan </html> elemen sebagai objek (dalam my. Element). Jika elemen tidak ditemukan, my. Element akan berisi null.

Finding HTML Elements by Tag Name (This example finds all <p> elements: ) � � � � <!DOCTYPE html> <body> <p>Hello World!</p> <p>The DOM is very useful. </p> <p>This example demonstrates the <b>get. Elements. By. Tag. Name</b> method</p> <p id="demo"></p> <script> var x = document. get. Elements. By. Tag. Name("p"); document. get. Element. By. Id("demo"). inner. HTML = 'The first paragraph (index 0) is: ' + x[0]. inner. HTML; </script> </body> </html>

� � � � � <!DOCTYPE html> <body> <p>Hello World!</p> <div id="main"> <p>The DOM is very useful. </p> <p>This example demonstrates the <b>get. Elements. By. Tag. Name</b> method</p> </div> <p id="demo"></p> <script> var x = document. get. Element. By. Id("main"); var y = x. get. Elements. By. Tag. Name("p"); document. get. Element. By. Id("demo"). inner. HTML = 'The first paragraph (index 0) inside "main" is: ' + y[1]. inner. HTML; </script> </body> </html>

Finding HTML Elements by Class Name � jika kita ingin menemukan semua elemen HTML dengan nama kelas yang sama, gunakan get. Elements. By. Class. Name (). Contoh ini mengembalikan daftar semua elemen dengan class = "intro". � var x = document. get. Elements. By. Class. Name("intro"); Menemukan elemen berdasarkan nama kelas tidak bekerja di Internet Explorer 8 dan versi sebelumnya.

Contoh : � � � � <!DOCTYPE html> <body> <p>Hello World!</p> <p class="intro">The DOM is very useful. </p> <p class="intro">This example demonstrates the <b>get. Elements. By. Class. Name</b> method. </p> <p id="demo"></p> <script> var x = document. get. Elements. By. Class. Name("intro"); document. get. Element. By. Id("demo"). inner. HTML = 'The first paragraph (index 0) with class="intro": ' + x[0]. inner. HTML; </script> </body> </html>

Finding HTML Elements by HTML Object Collections � � � � � <!DOCTYPE html> <body> <form id="frm 1" action="/action_page. php"> First name: <input type="text" name="fname" value="Donald"> Last name: <input type="text" name="lname" value="Duck"> <input type="submit" value="Submit"> </form> <p>Click "Try it" to display the value of each element in the form. </p> <button onclick="my. Function()">Try it</button> <p id="demo"></p> <script> function my. Function() { var x = document. forms["frm 1"]; var text = ""; var i; for (i = 0; i < x. length ; i++) { text += x. elements[i]. value + " ";

Contoh : var x = document. forms["frm 1"]; var text = ""; var i; for (i = 0; i < x. length; i++) { text += x. elements[i]. value + " "; } document. get. Element. By. Id("demo"). inner. HTML = text;

Java. Script HTML DOM - Changing CSS � To change the style of an HTML element, use this syntax: � document. get. Element. By. Id(id). style. property = new style

The following example changes the style of a <p> element: � � � <!DOCTYPE html> <body> <p id="p 1">Hello World!</p> <p id="p 2">Hello World!</p> � <script> document. get. Element. By. Id("p 2"). style. color = "blue"; document. get. Element. By. Id("p 2"). style. font. Family = "Arial"; document. get. Element. By. Id("p 2"). style. font. Size = "larger"; </script> � <p>The paragraph above was changed by a script. </p> � � � </body> </html>

Menggunakan Event � DOM HTML memungkinkan Anda mengeksekusi kode saat sebuah peristiwa terjadi. Acara dihasilkan oleh browser saat "hal-hal terjadi" pada elemen HTML: Sebuah elemen diklik Halaman telah dimuat Bidang masukan berubah Anda akan belajar lebih banyak tentang kejadian di bab berikutnya dari tutorial ini. Contoh ini mengubah gaya elemen HTML dengan id = "id 1", saat pengguna mengklik sebuah tombol:

Contoh : � <!DOCTYPE <html> <body> html> <h 1 id="id 1">My Heading 1</h 1> <button type="button" onclick="document. get. Element. By. Id('id 1'). style. col or = 'red'"> Click Me!</button> </body> </html>

� Dengan HTML DOM, Java. Script dapat mengakses dan mengubah semua elemen dokumen HTML. � Model HTML DOM dibangun seperti pohon Objek:

latihan � Buatlah program kecil untuk menampilkan data dari dosen dengan mengetikkan koden dosen, nama dosen dan informasi yg berhubungan dengan dosen tampil dilayar, dengan menggunakan HTML, PHP dan Ajax.