HTML DOM(2) Yosef Murya Kusuma Ardhana. ST., M.Kom

Ukuran: px

Mulai penontonan dengan halaman:

Download "HTML DOM(2) Yosef Murya Kusuma Ardhana. ST., M.Kom"

Verawati Hartono
6 tahun lalu
Tontonan:

1 HTML DOM(2) Yosef Murya Kusuma Ardhana. ST., M.Kom

2 Dengan HTML DOM, Anda dapat menavigasi pohon simpul menggunakan hubungan simpul. DOM Nodes Menurut standar W3C HTML DOM, segala sesuatu dalam dokumen HTML adalah sebuah node: Seluruh dokumen adalah simpul dokumen Setiap elemen HTML adalah node elemen Teks di dalam elemen HTML adalah node teks Setiap atribut HTML adalah node atribut Semua komentar adalah komentar node

4 Dengan HTML DOM, semua node dalam pohon simpul dapat diakses oleh JavaScript. Node baru dapat dibuat, dan semua node dapat dimodifikasi atau dihapus.

5 Hubungan Node Node dalam pohon simpul memiliki hubungan hirarki satu sama lain. Istilah orang tua, anak, dan saudara yang digunakan untuk menggambarkan hubungan. Di pohon simpul, simpul atas disebut root (atau akar) Setiap node memiliki tepat satu orangtua, kecuali root (yang tidak memiliki orang tua) Sebuah node dapat memiliki sejumlah anak Saudara (kakak dan adik) adalah node dengan induk yang sama

8 rom HTML di atas, Anda dapat membaca : <html> adalah node root <html> tidak memiliki orang tua <html> adalah induk dari <head> dan <body> <head> adalah anak pertama dari <html> <body> adalah anak terakhir dari <html>

9 <head> memiliki anak satu : <title> <title> memiliki satu anak ( node teks ) : DOM Tutorial <body> memiliki dua anak : <h1> dan <p> <h1> memiliki satu anak : Pelajaran DOM satu <p> memiliki satu anak : Halo dunia! <h1> dan <p> adalah saudara kandung

10 Menjelajahi Antara Nodes Anda dapat menggunakan properti simpul berikut untuk Navigat antara node dengan JavaScript : parentnode childnodes [ nodenumber ] firstchild lastchild nextsibling previoussibling

11 Peringatan! Sebuah kesalahan umum dalam pengolahan DOM adalah untuk mengharapkan node elemen untuk berisi teks. Dalam contoh ini : <title> DOM Tutorial < / title>, node elemen <title> tidak berisi teks. Ini berisi node teks dengan nilai DOM Tutorial. Nilai node teks dapat diakses oleh innerhtml properti node, atau nodevalue.

12 Nodes Anak dan Nilai Node Selain properti innerhtml, Anda juga dapat menggunakan childnodes dan sifat nodevalue untuk mendapatkan isi dari elemen. Kode berikut mendapat nilai elemen <p> dengan id = intro :

14 Dalam contoh di atas, getelementbyid adalah sebuah metode, sementara childnodes dan nodevalue adalah properti. Dalam tutorial ini kita menggunakan properti innerhtml. Namun, belajar metode di atas berguna untuk memahami struktur pohon dan navigasi dari DOM.

15 Menggunakan properti firstchild adalah sama dengan menggunakan childnodes [0]: contoh

17 DOM Root Nodes Ada dua sifat khusus yang memungkinkan akses ke dokumen lengkap: document.documentelement Dokumen penuh document.body Tubuh dokumen

20 The nodename Properti Properti nodename menentukan nama node. nodename read-only nodename dari node elemen adalah sama seperti nama tag nodename dari node atribut adalah nama atribut nodename dari node teks selalu # text nodename dari node dokumen selalu # document Catatan: nodename selalu berisi nama tag huruf besar dari elemen HTML.

21 The nodevalue Properti Properti nodevalue menentukan nilai dari sebuah node. nodevalue untuk node elemen tidak terdefinisi nodevalue untuk node teks adalah teks itu sendiri nodevalue untuk node atribut adalah nilai atribut

22 The nodetype Properti Properti nodetype mengembalikan jenis simpul. nodetype dibaca saja.

23 HTML DOM Node List Sebuah NodeList adalah array dari node (seperti sebuah array dari semua elemen HTML) HTML DOM Node List getelementsbytagname() method mengembalikan daftar node. Daftar simpul adalah sebuah array dari node.

24 HTML DOM Node List Kode berikut memilih semua node <p> dalam dokumen: contoh var x=document.getelementsbytagname( p ); The Nodes dapat diakses oleh nomor indeks. Untuk mengakses <p> kedua Anda dapat menulis script berikut:

25 HTML DOM Node List

26 HTML DOM Node List Catatan: Indeks dimulai dari 0.

27 HTML DOM Node List HTML DOM Node Daftar Panjang Properti panjang mendefinisikan jumlah node dalam node-list. Anda dapat loop melalui simpul-list dengan menggunakan properti length:

28 HTML DOM Node List

29 HTML DOM Node List

30 HTML DOM Node List Menampilkan warna background melalui tag <p> element pada sebuah node list :

31 HTML DOM Node List

32 TERIMAKASIH

dokumen-dokumen yang mirip

HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom

HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom HTML? HTML merupakan singkatan dari Hypertext Markup Language. HTML adalah sekumpulan text atau file ASCII yang berisi intruksi atau perintah program