Menerapkan HTML DOM Untuk Pengembangan Website

Belajar HTML DOM

Pada kesempatan ini saya akan berbagi mengenai materi HTML DOM untuk website, dimana HTML DOM digunakan untuk dapat mengakses elemen HTML seperti menambah, mengubah, dan menghapus. Materi yang saya akan bagikan pada posting kali ini, saya ambil dari World Wide Web Schools atau w3schools.com. Tetapi saya rangkup dengan menggunakan bahasa indonesia. Check it out!

HTML DOM Introduction

Apa itu DOM?

HTML DOM mendefinisikan standar untuk mengakses dan memanipulasi dokumen HTML.

DOM adalah (World Wide Web Consortium) standar W3C.

DOM mendefinisikan standar untuk mengakses dokumen HTML dan XML:

"W3C Document Object Model (DOM) adalah sebuah platform dan bahasa-netral antarmuka yang memungkinkan program dan skrip untuk secara dinamis mengakses dan memperbarui konten, struktur, dan gaya dari sebuah dokumen."

W3C DOM standar dipisahkan menjadi 3 bagian yang berbeda:

· DOM Core - model standar untuk dokumen terstruktur

· XML DOM - model standar untuk dokumen XML

· HTML DOM - model standar untuk dokumen HTML

Apakah HTML DOM?

HTML DOM adalah:

· Sebuah model objek standar untuk HTML

· Sebuah antarmuka pemrograman standar untuk HTML

· Sebuah standar W3C

HTML DOM mendefinisikan objek dan properti dari semua elemen HTML, dan metode untuk mengaksesnya.

Dengan kata lain:

HTML DOM adalah standar untuk bagaimana untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML.

HTML DOM Nodes

Dalam HTML DOM, semuanya node. DOM HTML dipandang sebagai pohon node.

DOM Nodes

Menurut standar W3C HTML DOM, segala sesuatu dalam dokumen HTML adalah node:

· Seluruh dokumen adalah node dokumen

· Setiap elemen HTML adalah node elemen

· Teks di dalam elemen HTML node teks

· Setiap atribut HTML adalah node atribut

· Komentar adalah node komentar

HTML DOM Node Pohon

HTML DOM memandang dokumen HTML sebagai struktur pohon. Struktur ini disebut Pohon Node:

Dengan HTML DOM, semua node dalam pohon dapat diakses oleh JavaScript. Semua elemen HTML (node) dapat dimodifikasi, dan node dapat dibuat atau dihapus.

Node Parent (Orangtua), Children (Anak), dan Siblings (Saudara)

Node dalam pohon node memiliki hubungan hirarki satu sama lain.

Istilah parent, children, dan siblings yang digunakan untuk menggambarkan hubungan. Node parent memiliki children. Children pada tingkat yang sama disebut siblings (brothers and sisters).

· Dalam pohon node, node atas disebut root

· Setiap node memiliki tepat satu parent, kecuali root (yang tidak memiliki parent)

· Sebuah node dapat memiliki sejumlah children

· Siblings adalah node dengan parent yang sama

Gambar berikut mengilustrasikan bagian dari pohon simpul dan hubungan antara node:

Lihatlah fragmen HTML berikut:

<html>
  <head>
    <title>DOM Tutorial</title>
  </head>
  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>
</html>

Dari HTML di atas:

· Node <html> tidak memiliki parent node, itu adalah root node

· <head> dan <body> parent node nya adalah node <html>

· node teks "Halo dunia!" parent node nya adalah node <p>

dan:

· The <html> node memiliki dua child node: <head> dan <body>

· <head> Node memiliki satu child node yaitu node <title>

· <title> Node juga memiliki satu child node yaitu teks node "DOM Tutorial"

· <h1> Dan node <p> adalah siblings dan kedua child node adalah dari tag <body>

dan:

· Elemen <head> adalah first child dari elemen <html>

· Elemen <body> adalah last child dari elemen <html>

· Elemen <h1> adalah first child dari elemen <body>

· Elemen <p> adalah last child dari elemen <body>

Peringatan!

Sebuah kesalahan umum dalam pengolahan DOM adalah untuk mengharapkan node elemen berisi teks.

Dalam contoh ini: <title> DOM Tutorial </ title>, node elemen <title>, memegang text node dengan nilai "DOM Tutorial".

Nilai dari node teks dapat diakses oleh properti innerHTML node.

HTML DOM Methods

Metode adalah tindakan yang dapat Anda lakukan pada node (Elemen HTML)

Programming Interface

HTML DOM dapat diakses dengan JavaScript (dan bahasa pemrograman lain).

Semua elemen HTML didefinisikan sebagai objects, dan antarmuka pemrograman adalah object methods dan object properties.

Method (metode) adalah suatu tindakan yang dapat Anda lakukan (seperti menambahkan atau memodifikasi elemen).

Property (properti) adalah nilai yang Anda bisa dapatkan atau atur (seperti nama atau isi dari sebuah node).

Metode getElementById()

Metode getElementById() mengembalikan elemen dengan ID yang ditentukan:

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello World!</p>

<p>This example demonstrates the <b>getElementById</b> method!</p>

x=document.getElementById("intro");

document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");

</script>

</body>

</html>

Hasil :

Hello World!
This example demonstrates the getElementById method!
The text from the intro paragraph: Hello World!

HTML DOM Objects - Methods dan Properties

Beberapa metode yang umum digunakan HTML DOM:

· getElementById(id) – get (mendapatkan) node (elemen) dengan id tertentu

· appendChild(node) – insert (menyisipkan) node anak baru (elemen)

· removeChild(node) – remove (menghapus) child node (elemen)

Beberapa umum digunakan HTML DOM properti:

· innerHTML – nilai teks dari node (elemen)

· parentNode – parent node dari node (elemen)

· childNodes – child node dari node (elemen)

· attributes – attributes node dari node (elemen)

x.innerHTML - the text value of x

x.nodeName - the name of x

x.nodeValue - the value of x

x.parentNode - the parent node of x

x.childNodes - the child nodes of x

x.attributes - the attributes nodes of x

Sebuah Kehidupan Nyata Obyek Ilustrasi:

Seseorang adalah obyek.

Metode seseorang bisa makan(), tidur(), kerja(), bermain(), dll

Semua orang memiliki metode ini, tapi mereka melakukan pada waktu yang berbeda.

Properti seseorang termasuk nama, tinggi, berat, usia, warna mata, dll.

Semua orang memiliki properti ini, tetapi nilai-nilai nya berbeda dari orang ke orang.

Beberapa Metode Obyek DOM

Berikut adalah beberapa metode (paling umum):

Method	Description
getElementById()	Mengembalikan elemen yang memiliki atribut ID dengan sebuah nilai
getElementsByTagName()	Mengembalikan daftar node (collection/array of nodes) yang mengandung semua elemen dengan nama tag yang ditentukan
getElementsByClassName()	Mengembalikan daftar node yang berisi semua elemen dengan kelas tertentu

appendChild()	Menambahkan node child baru ke node tertentu
removeChild()	Removes a child node
replaceChild()	Replaces a child node
insertBefore()	Inserts a new child node sebelum child node ditentukan

createAttribute()	Creates an Attribute node
createElement()	Creates an Element node
createTextNode()	Creates a Text node

getAttribute()	Mengembalikan nilai atribut yg ditentukan
setAttribute()	Sets or changes the specified attribute, to the specified value

HTML DOM Properties

Properti adalah nilai-nilai dari node (Elemen HTML) bahwa Anda bisa mendapatkan (get) atau menetapkan (set)

Programming Interface

HTML DOM dapat diakses dengan JavaScript (dan bahasa pemrograman lain).

Antarmuka pemrograman dari DOM didefinisikan oleh metode dan properti.

Method adalah suatu tindakan yang dapat Anda lakukan (seperti menambahkan atau menghapus node).

Property adalah nilai yang Anda bisa dapatkan atau mengatur (seperti nama atau isi dari sebuah node).

InnerHTML Properti

Cara termudah untuk mendapatkan konten dari suatu elemen adalah dengan menggunakan properti innerHTML.

InnerHTML properti berguna untuk mendapatkan atau mengganti isi dari elemen HTML.

Contoh code berikut mendapat innerHTML dari elemen <p> dengan id="intro":

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello World!</p>

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

</script>

</body>

</html>

Hasil :

Hello World!

Dalam contoh di atas, getElementById adalah metode, sementara innerHTML adalah sebuah properti.

Tips : InnerHTML properti dapat digunakan untuk mendapatkan atau mengubah elemen HTML, termasuk <html> dan body.

Properti nodeName

Properti nodeName menentukan nama node.

· nodeName adalah 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.

Properti nodeValue

Property 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

Dapatkan Nilai dari sebuah Elemen

Contoh berikut mengambil teks nilai node tag <p id="intro"> :

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello World!</p>

x=document.getElementById("intro");

document.write(x.firstChild.nodeValue);

</script>

</body>

</html>

Hasil :

Hello World!

The NodeType Properti

Properti nodeType mengembalikan jenis node. nodeType hanya dapat dibaca.

Jenis node yang paling penting adalah:

Element type	NodeType
Element	1
Attribute	2
Text	3
Comment	8
Document	9

HTML DOM Access

Mengakses HTML DOM - Mencari elemen HTML

Mengakses Elemen HTML (Nodes)

Mengakses elemen HTML adalah sama dengan mengakses Node.

Anda dapat mengakses sebuah elemen HTML dengan cara yang berbeda:

· Dengan menggunakan metode getElementById()

· Dengan menggunakan metode getElementsByTagName()

· Dengan menggunakan metode getElementsByClassName()

Metode getElementById()

Metode getElementById() mengembalikan elemen dengan ID yang ditentukan:

Syntax :

node.getElementById("id");

Contoh berikut mendapatkan elemen dengan id="intro":

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello World!</p>

<p>This example demonstrates the <b>getElementById</b> method!</p>

x=document.getElementById("intro");

document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");

</script>

</body>

</html>

Hasil

Hello World!
This example demonstrates the getElementById method!
The text from the intro paragraph: Hello World!

Metode getElementsByTagName()

getElementsByTagName() mengembalikan semua elemen dengan nama tag yang ditentukan.

Syntax :

node.getElementsByTagName("tagname");

Contoh berikut mengembalikan daftar semua elemen <p> dalam dokumen:

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<p>The DOM is very useful!</p>

<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

x=document.getElementsByTagName("p");

document.write("Text of first paragraph: " + x[0].innerHTML);

</script>

</body>

</html>

Hasil :

Hello World!

The DOM is very useful!

This example demonstrates the getElementsByTagName method.

Text of first paragraph: Hello World!

Contoh berikut mengembalikan daftar semua elemen <p> yang adalah keturunan (children, grand-children, etc.) dari elemen dengan id="main":

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>

<p>This example demonstrates the <b>getElementsByTagName</b> method</p>

</div>

x=document.getElementById("main").getElementsByTagName("p");

document.write("First paragraph inside the div: " + x[0].innerHTML);

</script>

</body>

</html>

Hasil :

Hello World!

The DOM is very useful.

This example demonstrates the getElementsByTagName method

First paragraph inside the div: The DOM is very useful.

Metode getElementsByClassName()

Jika Anda ingin mencari semua elemen HTML dengan nama kelas yang sama. Gunakan metode ini:

document.getElementsByClassName("intro");

Contoh di atas mengembalikan daftar semua elemen dengan class = "intro".

Note: getElementsByClassName() tidak bekerja di Internet Explorer 5,6,7, dan 8.

HTML DOM – Modifying

Memodifikasi HTML = Mengubah Elemen, Atribut, Styles, dan Event.

Memodifikasi Elemen HTML

Memodifikasi HTML DOM dapat banyak hal yang berbeda

· Mengubah konten HTML

· Mengubah gaya CSS

· Mengubah atribut HTML

· Membuat elemen HTML baru

· Menghapus elemen HTML yang ada

· Mengubah event (handlers)

Dalam bab-bab berikutnya kita akan melihat lebih dekat pada cara yang paling umum untuk memodifikasi HTML DOM.

Mengubah Konten HTML

Cara termudah untuk mengubah isi dari suatu elemen adalah dengan menggunakan properti innerHTML.

Contoh berikut mengubah konten HTML elemen <p> :

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="New text!";

</script>

<p>The paragraph above was changed by a script.</p>

</body>

</html>

Hasil

New text!
The paragraph above was changed by a script.

Mengubah Syle HTML

Dengan HTML DOM Anda dapat mengakses objek style elemen HTML.

Contoh berikut mengubah gaya HTML paragraf:

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello world!</p>

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script>

</body>

</html>

Hasil :

Hello world!
Hello world!

Menciptakan Elemen HTML Baru

Untuk menambahkan elemen baru ke HTML DOM, Anda harus membuat elemen (node elemen) pertama, dan kemudian tambahkan ke elemen yang ada.

<!DOCTYPE html>

<html>

<body>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

</body>

</html>

Hasil

This is a paragraph.
This is another paragraph.
This is new.

HTML DOM – Modifying HTML Content

Dengan HTML DOM, JavaScript dapat mengakses setiap elemen dalam dokumen HTML

Mengubah Konten HTML

Cara termudah untuk mengubah isi dari suatu unsur adalah dengan menggunakan properti innerHTML.

Contoh berikut mengubah konten HTML elemen <p>:

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="New text!";

</script>

<p>The paragraph above was changed by a script.</p>

</body>

</html>

Hasil

New text!
The paragraph above was changed by a script.

Mengubah Style HTML

Dengan HTML DOM Anda dapat mengakses objek style elemen HTML.

Contoh berikut mengubah style HTML paragraf:

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello world!</p>

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script>

</body>

</html>

Hasil

Hello world!
Hello world!

Menggunakan Events

HTML DOM memungkinkan Anda untuk mengeksekusi kode ketika sebuah event terjadi.

Event yang dihasilkan oleh browser ketika "sesuatu terjadi" untuk elemen HTML:

· Sebuah elemen clicked on

· Halaman telah dimuat

· Field input berubah

Anda dapat membaca lebih lanjut tentang peristiwa di bab berikutnya.

Berikut 2 contoh mengubah warna latar belakang dari elemen <body> ketika sebuah tombol diklik:

<!DOCTYPE html>

<html>

<body>

<input type="button"

onclick="document.body.style.backgroundColor='lavender';"

value="Change background color">

</body>

</html>

Hasil

Jalankan di browser

contoh ini kode yang sama dijalankan oleh fungsi:

<!DOCTYPE html>

<html>

<body>

function ChangeBackground()

{

document.body.style.backgroundColor="lavender";

}

</script>

</body>

</html>

Hasil

Jalankan di browser

Contoh berikut mengubah teks dari elemen <p> ketika sebuah tombol diklik:

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello world!</p>

function ChangeText()

{

document.getElementById("p1").innerHTML="New text!";

}

</script>

</body>

</html>

Hasil

Jalankan di browser

HTML DOM – Elements

Menambah, Menghapus dan Mengganti Elemen HTML

Menciptakan Elemen HTML Baru - appendChild()

Untuk menambahkan elemen baru ke HTML DOM, Anda harus membuat elemen (node elemen) pertama, dan kemudian tambahkan ke elemen yang ada.

<!DOCTYPE html>

<html>

<body>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

</body>

</html>

Penjelasan Contoh

Kode ini menciptakan elemen <p> baru:

var para=document.createElement("p");

Untuk menambahkan teks ke elemen <p>, Anda harus membuat node teks pertama. Kode ini menciptakan node teks:

var node=document.createTextNode("This is a new paragraph.");

Maka Anda harus menambahkan node teks ke elemen <p>:

para.appendChild(node);

Akhirnya anda harus menambahkan elemen baru ke elemen yang ada.

Kode ini menemukan elemen yang ada:

var element=document.getElementById("div1");

Kode ini menambahkan elemen baru ke elemen yang ada:

element.appendChild(para);

Membuat HTML Elemen baru - insertBefore()

The appendChild() metode dalam contoh sebelumnya, ditambahkan elemen baru sebagai last child dari parent.

Jika Anda tidak ingin bahwa Anda dapat menggunakan metode insertBefore() :

<!DOCTYPE html>

<html>

<body>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("div1");

var child=document.getElementById("p1");

element.insertBefore(para,child);

</script>

</body>

</html>

Menghapus Elemen HTML yang ada

Untuk menghapus sebuah elemen HTML, Anda harus mengetahui parent dari elemen:

<!DOCTYPE html>

<html>

<body>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

</body>

</html>

Penjelasan Contoh

Dokumen ini berisi elemen HTML <div> dengan dua child node (dua elemen <p>):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Menemukan elemen dengan id="div1":

var parent=document.getElementById("div1");

Cari elemen <p> dengan id="p1":

var child=document.getElementById("p1");

Remove child dari parent:

parent.removeChild(child);

Akan menyenangkan untuk dapat menghapus sebuah elemen tanpa mengacu ke orangtua? Maaf. DOM perlu mengetahui kedua elemen yang ingin Anda hapus, dan induknya.

Berikut ini adalah solusi yang umum: Temukan child yang ingin dihapus, dan gunakan properti parentNode untuk menemukan parent:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Mengganti Elemen HTML

Untuk mengganti sebuah elemen ke HTML DOM, gunakan metode replaceChild():

<!DOCTYPE html>

<html>

<body>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

parent.replaceChild(para,child);

</script>

</body>

</html>

HTML DOM – Events

HTML DOM memungkinkan JavaScript untuk bereaksi terhadap event HTML.

Bereaksi terhadap Events

Sebuah JavaScript dapat dieksekusi ketika suatu event terjadi, seperti bila pengguna mengklik pada sebuah elemen HTML.

Untuk mengeksekusi kode ketika pengguna mengklik elemen, tambahkan kode JavaScript untuk atribut event HTML:

onclick=JavaScript

Contoh event HTML:

· Ketika pengguna mengklik mouse

· Ketika sebuah halaman web telah dimuat

· Ketika gambar telah dimuat

· Ketika mouse bergerak di atas elemen

· Ketika sebuah field input diubah/diganti

· Ketika form HTML di-submit

· Ketika seorang pengguna menekan kunci di keyboard

Dalam contoh ini, isi dari elemen <h1> berubah ketika pengguna mengklik di atasnya:

<!DOCTYPE html>

<html>

<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>

</html>

Dalam contoh ini, fungsi ini dipanggil dari event handler:

<!DOCTYPE html>

<html>

<head>

function changetext(id)

{

id.innerHTML="Ooops!";

}

</script>

</head>

<body>

<h1 onclick="changetext(this)">Click on this text!</h1>

</body>

</html>

HTML Event Atribut

Untuk menetapkan event untuk elemen HTML Anda dapat menggunakan atribut event.

<!DOCTYPE html>

<html>

<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</body>

</html>

Dalam contoh di atas, fungsi bernama displayDate akan dijalankan ketika tombol diklik.

Menetapkan Event Menggunakan HTML DOM

HTML DOM memungkinkan Anda untuk menetapkan event untuk elemen HTML menggunakan JavaScript:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</body>

</html>

Dalam contoh di atas, fungsi bernama displayDate ditugaskan untuk elemen HTML dengan id=myButn ". Fungsi akan dijalankan ketika tombol diklik.

Onload dan onunload Event

Event onload dan onunload dipicu ketika pengguna memasuki atau meninggalkan halaman.

Event onload dapat digunakan untuk memeriksa jenis browser pengunjung dan versi browser, dan memuat versi yang tepat dari halaman web berdasarkan informasi.

Event onload dan onunload dapat digunakan untuk menangani cookie.

<!DOCTYPE html>

<html>

function checkCookies()

{

if (navigator.cookieEnabled==true)

{

alert("Cookies are enabled")

}

else

{

alert("Cookies are not enabled")

}

</script>

<p>An alert box should tell you if your browser has enabled cookies or not.</p>

</body>

</html>

Event onchange

Event onchange sering digunakan dalam kombinasi dengan validasi field input.

Berikut adalah contoh bagaimana menggunakan onchange tersebut. Huruf upperCase() fungsi akan dipanggil ketika pengguna mengubah konten sebuah field input.

<!DOCTYPE html>

<html>

<head>

function myFunction()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

Enter your name: <input type="text" id="fname" onchange="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

</body>

</html>

Menerapkan HTML DOM Untuk Pengembangan Website

Belajar HTML DOM

HTML DOM Introduction

Apa itu DOM?

Apakah HTML DOM?

HTML DOM Nodes

DOM Nodes

HTML DOM Node Pohon

Node Parent (Orangtua), Children (Anak), dan Siblings (Saudara)

Peringatan!

HTML DOM Methods

Programming Interface

Metode getElementById()

HTML DOM Objects - Methods dan Properties

Sebuah Kehidupan Nyata Obyek Ilustrasi:

Beberapa Metode Obyek DOM

HTML DOM Properties

Programming Interface

InnerHTML Properti

Properti nodeName

Properti nodeValue

Dapatkan Nilai dari sebuah Elemen

The NodeType Properti

HTML DOM Access

Mengakses Elemen HTML (Nodes)

Metode getElementById()

Metode getElementsByTagName()

Metode getElementsByClassName()

HTML DOM – Modifying

Memodifikasi Elemen HTML

Mengubah Konten HTML

Mengubah Syle HTML

Menciptakan Elemen HTML Baru

HTML DOM – Modifying HTML Content

Mengubah Konten HTML

Mengubah Style HTML

Menggunakan Events

HTML DOM – Elements

Menciptakan Elemen HTML Baru - appendChild()

Penjelasan Contoh

Membuat HTML Elemen baru - insertBefore()

Menghapus Elemen HTML yang ada

Penjelasan Contoh

Mengganti Elemen HTML

HTML DOM – Events

Bereaksi terhadap Events

HTML Event Atribut

Menetapkan Event Menggunakan HTML DOM

Onload dan onunload Event

Event onchange

Next

Posting Lebih Baru

Previous

This is the last post.

0 komentar:

Posting Komentar