59653 modul 4 praktikum pemrograman berbasis web
!= not equal
(17)
Operator Description
> greater than
< less than
>= greater than or equal to <= less than or equal to
? ternary operator
JavaScript Logical Operator Operator Description && logical and
|| logical or
! logical not
LATIHAN
1. Tampilkan jumlah = 10 + 5, dengan menggunakan dua variabel x dan y. <!DOCTYPE html>
<html> <body>
<p id="demo">Display the result here.</p> <script>
var x; var y; </script> </body> </html>
2. Temukan sisanya ketika 15 dibagi dengan 9, dengan menggunakan dua variabel x dan y
<!DOCTYPE html> <html>
<body>
<p id="demo">Display the result here.</p> <script>
var x; var y; </script> </body> </html>
(18)
Komentar JavaScript
Tidak semua pernyataan JavaScript "dieksekusi". Kode setelah garis miring ganda // atau antara / * dan * / untuk multi linediperlakukan sebagai komentar. Komentar JavaScript dapat digunakan untuk menjelaskan kode JavaScript, dan membuatnya lebih mudah dibaca. Komentar JavaScript juga bisa digunakan untuk mencegah eksekusi, saat menguji kode alternatif. Komentar Baris tunggal Komentar baris tunggal dimulai dengan //. Setiap teks antara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan dieksekusi). Komentar diabaikan, dan tidak akan dieksekusi:
Contoh :
<!DOCTYPE html> <html>
<body>
<h2>JavaScript Comments are NOT Executed</h2> <p id="demo"></p>
<script> var x; x = 5;
// x = 6; I will not be executed
document.getElementById("demo").innerHTML = x; </script>
</body> </html>
JavaScript Case Sensitif. Semua pengidentifikasi JavaScript peka terhadap huruf besar. Variabel Last Name dan last name, adalah dua variabel yang berbeda.
Contoh :
<!DOCTYPE html> <html>
<body>
<h2>JavaScript is Case Sensitive</h2> <p>Try change lastName to lastname.</p> <p id="demo"></p>
<script>
var lastname, lastName; lastName = "Doe"; lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName; </script>
</body> </html>
(19)
Sebagian besar program JavaScript berisi banyak pernyataan JavaScript. Pernyataan dijalankan, satu per satu, sesuai urutan penulisannya. Dalam contoh ini x, y, dan z diberi nilai, dan akhirnya z ditampilkan:
Contoh 1:
<!DOCTYPE html> <html>
<body>
<h2>JavaScript Statements</h2>
<p>Kode JavaScript (atau hanya JavaScript) adalah urutan pernyataan JavaScript.</p> <p id="demo"></p>
<script> var x, y, z; x = 5; y = 6; z = x + y;
document.getElementById("demo").innerHTML = z; </script>
</body> </html> Semicolons ;
Semikolon memisahkan pernyataan JavaScript. Gunakan titik koma di akhir setiap pernyataan yang dapat dieksekusi:
Contoh :
<!DOCTYPE html> <html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript statements are separated by semicolons.</p> <p id="demo1"></p>
<script> var a, b, c; a = 1; b = 2; c = a + b;
document.getElementById("demo1").innerHTML = c; </script>
</body> </html>
Bila dipisahkan oleh titik koma, beberapa pernyataan pada satu baris diperbolehkan: <!DOCTYPE html>
<html> <body>
(20)
<h2>JavaScript Statements</h2>
<p>Multiple statements on one line is allowed.</p> <p id="demo1"></p>
<script> var a, b, c;
a = 1; b = 2; c = a + b;
document.getElementById("demo1").innerHTML = c; </script>
</body> </html>
Jenis Data JavaScript (TIPE DATA)
Variabel JavaScript dapat menyimpan banyak tipe data: angka, string, objek dan banyak lagi: varlength =16; // Number
varlastName ="Johnson"; // String
varx = {firstName:"John", lastName:"Doe"}; // Object Konsep Tipe Data
Dalam pemrograman, tipe data merupakan konsep penting. Agar dapat beroperasi pada variabel, penting untuk mengetahui sesuatu tentang jenisnya. Tanpa tipe data, komputer tidak bisa menyelesaikannya dengan aman:
varx =16+"Volvo"; jadi kebacavarx ="16"+"Volvo";
Saat menambahkan angka dan string, JavaScript akan memperlakukan nomor itu sebagai string.
Contoh :
<!DOCTYPE html> <html>
<body>
<p>When adding a number and a string, JavaScript will treat the number as a string.</p> <p id="demo"></p>
<script>
var x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x; </script>
</body> </html>
JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapat menghasilkan hasil yang berbeda:
Contoh1 :
<!DOCTYPE html> <html>
(21)
<p id="demo"></p> <script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x; </script>
</body> </html> Contoh 2:
<!DOCTYPE html> <html>
<body>
<p id="demo"></p> <script>
var x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x; </script>
</body> </html>
Pada contoh pertama, JavaScript memperlakukan 16 dan 4 sebagai angka, sampai mencapai "Volvo". Pada contoh kedua, karena operan pertama adalah string, semua operan diperlakukan sebagai string.
Jenis JavaScript Dinamis.
JavaScript memiliki tipe dinamis. Ini berarti bahwa variabel yang sama dapat digunakan untuk menyimpan tipe data yang berbeda:
Contoh :
Var x; // Sekarang x tidak terdefinisi
Var x = 5; // Sekarang x adalah sebuah nomor Var x = "john"; // Sekarang x adalah sebuah String String JavaScript
String (atau string teks) adalah serangkaian karakter seperti "John Doe". String ditulis dengan tanda petik. Anda bisa menggunakan tanda kutip tunggal atau ganda: Contoh var varName = "Volvo XC60"; // Menggunakan tanda kutip ganda svar varName = 'Volvo XC60'; // Menggunakan tanda kutip tunggal
Contoh :
<!DOCTYPE html> <html>
<body>
<p id="demo"></p> <script>
(22)
var carName1 = "Volvo XC60"; var carName2 = 'Volvo XC60'; var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'"; var answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML = carName1 + "<br>" +
carName2 + "<br>" + answer1 + "<br>" + answer2 + "<br>" + answer3;
</script> </body> </html>
Nomor (number) JavaScript
JavaScript hanya memiliki satu jenis angka. Angka dapat ditulis dengan, atau tanpa desimal: Contoh :
<!DOCTYPE html> <html>
<body>
<p id="demo"></p> <script>
var x1 = 34.00; var x2 = 34; var y = 123e5; var z = 123e-5;
document.getElementById("demo").innerHTML = x1 + "<br>" + x2 + "<br>" + y + "<br>" + z </script>
</body> </html>
JavaScript Booleans
Boolean hanya bisa memiliki dua nilai: benar atau salah. Example
varx =true; vary =false;
Boolean sering digunakan dalam pengujian bersyarat. Array JavaScript
Array JavaScript ditulis dengan tanda kurung siku. Item array dipisahkan dengan koma. Kode berikut menyatakan (membuat) sebuah array yang disebut mobil, berisi tiga item (nama mobil):
(23)
Contoh :
<!DOCTYPE html> <html>
<body>
<p id="demo"></p> <script>
var cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0]; </script>
</body> </html>
Objek JavaScript
Objek JavaScript ditulis dengan kurung kurawal. Properti objek ditulis sebagai nama: pasangan nilai, dipisahkan dengan tanda koma. Anda telah mengetahui bahwa variabel JavaScript adalah kontainer untuk nilai data. Kode ini memberikan nilai sederhana (Fiat) ke variabel bernama mobil:
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Membuat Variabel JavaScript.</p> <p id="demo"></p>
<script>
var car = "Fiat";
document.getElementById("demo").innerHTML = car; </script>
</body> </html>
Objek juga variabel. Tapi objek bisa mengandung banyak nilai. Kode ini memberikan banyak nilai (Fiat, 500, putih) ke variabel bernama mobil:
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Creating a JavaScript Object.</p> <p id="demo"></p>
<script>
var car = {type:"Fiat", model:"500", color:"white"};
document.getElementById("demo").innerHTML = car.color; </script>
(24)
</body> </html>
Nilai ditulis sebagai nama: nilai pasangan (nama dan nilai dipisahkan oleh titik dua). Objek JavaScript adalah kontainer untuk nilai yang dinamai.
Properti Objek
Nama: nilai pasangan (dalam objek JavaScript) disebut properti. Contoh :
<!DOCTYPE html> <html>
<body>
<p id="demo"></p> <script>
var person = {
firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" };
document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; </script>
</body> </html>
Objek (orang) pada contoh di atas memiliki 4 properti: firstName, lastName, age, dan eye color.
Mengakses Properti Objek
Anda dapat mengakses properti objek dengan dua cara: objectName.propertyName
or
objectName["propertyName"] Contoh 1 :
<!DOCTYPE html> <html>
<body>
<p> Ada dua cara berbeda untuk mengakses properti objek: </p>
(25)
<p id="demo"></p> <script>
var person = { firstName: "John", lastName : "Doe", id : 5566 };
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script> </body> </html> Contoh 2 :
<!DOCTYPE html> <html>
<body>
<p> There are two different ways to access an object property: </p> <p>You can use person.property or person["property"].</p>
<p id="demo"></p> <script>
var person = { firstName: "John", lastName : "Doe", id : 5566 };
document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; </script>
</body> </html>
Mengakses Metode Objek
Anda mengakses metode objek dengan sintaks berikut: objectName.methodName()
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Creating and using an object method.</p>
<p>An object method is a function definition, stored as a property value.</p> <p id="demo"></p>
(26)
<script> var person = {
firstName: "John", lastName : "Doe", id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName; }
};
document.getElementById("demo").innerHTML = person.fullName(); </script>
</body> </html>
Jika Anda mengakses metode Nama Lengkap, tanpa (), itu akan mengembalikan definisi fungsi, Sebuah metode sebenarnya adalah definisi fungsi yang disimpan sebagai nilai properti:
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Metode objek adalah definisi fungsi, disimpan sebagai nilai properti.</p> <p>Jika Anda mengaksesnya tanpa (), itu akan mengembalikan definisi fungsi:</p> <p id="demo"></p>
<script> var person = {
firstName: "John", lastName : "Doe", id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName; }
};
document.getElementById("demo").innerHTML = person.fullName; </script>
</body> </html> LATIHAN :
1. Tampilkan "John" dengan mengekstrak informasi dari objek orang tersebut. <!DOCTYPE html>
<html> <body>
(27)
<p id="demo">Display the result here.</p> <script>
var person = {firstName:"John", lastName:"Doe"}; </script>
</body> </html>
2. Tambahkan properti dan nilai berikut ke objek orang tersebut: negara: Amerika Serikat
<!DOCTYPE html> <html>
<body>
<p id="demo"></p> <script>
var person = {firstName:"John", lastName:"Doe"};
document.getElementById("demo").innerHTML = person.country; </script>
</body> </html>
3. Buat objek yang disebut orang dengan nama = John, umur = 50. Kemudian, akses objek untuk menampilkan "John berusia 50 tahun". <!DOCTYPE html>
<html> <body>
<p id="demo">Display the result here.</p> <script>
// Create the object here </script>
</body> </html>
Cakupan JavaScript (Scope)
Lingkup adalah himpunan variabel yang dapat Anda akses. Dalam JavaScript, ruang lingkup adalah himpunan variabel, objek, dan fungsi yang dapat Anda akses. Variabel dinyatakan dalam fungsi JavaScript, menjadi LOCAL. Variabel lokal memiliki cakupan lokal: Mereka hanya dapat diakses dalam fungsi.
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Variabel lokal carName tidak bisa diakses dari kode diluar fungsi:</p> <p id="demo"></p>
<script> myFunction();
(28)
document.getElementById("demo").innerHTML = "The type of carName is " + typeof carName; function myFunction() {
var carName = "Volvo"; }
</script> </body> </html>
Karena variabel lokal hanya dikenali di dalam fungsinya, variabel dengan nama yang sama dapat digunakan dalam fungsi yang berbeda.Variabel lokal dibuat saat fungsi dimulai, dan dihapus saat fungsi selesai. Variabel yang dinyatakan di luar fungsi, menjadi GLOBAL.Variabel global memiliki cakupan global: Semua skrip dan fungsi pada halaman web dapat mengaksesnya.
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Sebuah variabel GLOBAL dapat diakses dari script atau fungsi apapun.</p> <p id="demo"></p>
<script>
var carName = "Volvo"; myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script> </body> </html>
Jika Anda menetapkan nilai pada variabel yang belum diumumkan, maka secara otomatis akan menjadi variabel GLOBAL.
Contoh kode ini akan mendeklarasikan variabel global carName, walaupun nilainya diberikan di dalam sebuah fungsi.
<!DOCTYPE html> <html>
<body> <p>
Jika Anda menetapkan nilai pada variabel yang belum diumumkan, Maka secara otomatis akan menjadi variabel GLOBAL:
(29)
<p id="demo"></p> <script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName; function myFunction() {
carName = "Volvo"; }
</script> </body> </html>
Event Java script
event HTML adalah "hal-hal" yang terjadi pada elemen HTML. Saat JavaScript digunakan di halaman HTML, JavaScript dapat "bereaksi" terhadap kejadian ini. event HTML bisa jadi sesuatu yang dilakukan browser, atau sesuatu yang dilakukan pengguna, Berikut adalah beberapa contoh event HTML:
Laman web HTML telah selesai dimuat Bidang masukan HTML telah diubah Sebuah tombol HTML diklik
Seringkali, saat kejadian terjadi, Anda mungkin ingin melakukan sesuatu. JavaScript memungkinkan Anda menjalankan kode saat kejadian terdeteksi. HTML memungkinkan atribut event handler, dengan kode JavaScript, untuk ditambahkan ke elemen HTML. Dalam contoh berikut, atribut onclick (dengan kode), ditambahkan ke elemen tombol:
Contoh :
<!DOCTYPE html> <html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p> </body>
</html>
Pada contoh di atas, kode JavaScript akan mengubah isi elemen dengan id = "demo". Pada contoh berikut, kode akan mengubah isi elemennya sendiri (menggunakan this.innerHTML): <!DOCTYPE html>
<html> <body>
<button onclick="this.innerHTML=Date()">The time is?</button> </body>
(30)
Kode JavaScript seringkali beberapa barisnya panjang. Lebih umum melihat atribut dengan cara memanggil fungsi:
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button> <script>
function displayDate() {
document.getElementById("demo").innerHTML = Date(); }
</script>
<p id="demo"></p> </body>
</html>
Berikut adalah daftar beberapa event HTML yang umum:
Event Description
onchange An HTML element has been changed onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
LATIHAN
1. Saat tombol diklik, trigger Function () dengan sebuah event. <!DOCTYPE html>
<html> <body>
<button>Click Me</button> <p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World"; }
</script> </body> </html>
(31)
2. Elemen <span> harus melakukan sesuatu saat seseorang mengarahkan mouse ke atasnya. Cobalah untuk memperbaikinya
<!DOCTYPE html> <html>
<body>
<span someevent="this.style.color='red'">Mouse over me!</span> </body>
</html>
DOM HTML (Document Object Model)
Saat halaman web dimuat, browser membuat Document Object Model halaman. Model HTML DOM dibangun sebagai pohon Objek:
Dengan model objek, JavaScript mendapatkan semua kekuatan yang dibutuhkan untuk membuat HTML dinamis:
JavaScript dapat mengubah semua elemen HTML di halaman JavaScript dapat mengubah semua atribut HTML di halaman JavaScript dapat mengubah semua gaya CSS di halaman
JavaScript dapat menghapus elemen dan atribut HTML yang ada JavaScript dapat menambahkan elemen HTML dan atribut baru
JavaScript dapat bereaksi terhadap semua aktivitas HTML yang ada di halaman JavaScript dapat membuat acara HTML baru di halaman
Apa itu HTML DOM?
DOM HTML adalah model objek standar dan antarmuka pemrograman untuk HTML. Ini mendefinisikan:
Elemen HTML sebagai objek Properti semua elemen HTML
Metode untuk mengakses semua elemen HTML Acara untuk semua elemen HTML
(32)
Dengan kata lain: DOM HTML adalah standar untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML. Metode HTML DOM adalah tindakan yang dapat Anda lakukan (pada Elemen HTML). Properti HTML DOM adalah nilai (dari Elemen HTML) yang dapat Anda setel atau ubah.
Antarmuka Pemrograman DOM
DOM HTML dapat diakses dengan JavaScript (dan dengan bahasa pemrograman lainnya). Di DOM, semua elemen HTML didefinisikan sebagai objek.Antarmuka pemrograman adalah sifat dan metode masing-masing objek. Properti adalah nilai yang bisa Anda dapatkan atau tetapkan (seperti mengubah konten elemen HTML). Metode adalah tindakan yang dapat Anda lakukan (seperti menambahkan atau menghapus elemen HTML).
Contoh berikut mengubah konten (innerHTML) elemen <p> dengan id = "demo": <!DOCTYPE html>
<html> <body>
<h2>My First Page</h2> <p id="demo"></p> <script>
document.getElementById("demo").innerHTML = "Hello World!"; </script>
</body> </html>
Pada contoh di atas, getElementById adalah sebuah metode, sedangkan innerHTML adalah sebuah properti.
Metode GetElementById
Cara yang paling umum untuk mengakses elemen HTML adalah dengan menggunakan id elemen. Pada contoh di atas, metode getElementById menggunakan id = "demo" untuk menemukan elemennya.
Properti innerHTML
Cara termudah untuk mendapatkan konten sebuah elemen adalah dengan menggunakan innerHTML properti. Properti innerHTML berguna untuk mendapatkan atau mengganti konten elemen HTML. Properti innerHTML dapat digunakan untuk mendapatkan atau mengubah elemen HTML, termasuk <html> dan <body>. Objek dokumen HTML DOM adalah pemilik semua objek lain di halaman web Anda.
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.
(33)
Menemukan Elemen HTML
Method Description
document.getElementById(id) Find an element by element id document.getElementsByTagName(name) Find elements by tag name document.getElementsByClassName(name) Find elements by class name
Mengubah Unsur HTML
Method Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML element
element.setAttribute(attribute, value) Change the attribute value of an HTML element
element.style.property = new style Change the style of an HTML element
Menambahkan dan Menghapus Unsur
Method Description
document.createElement(element) Create an HTML element document.removeChild(element) Remove an HTML element document.appendChild(element) Add an HTML element document.replaceChild(element) Replace an HTML element
document.write(text) Write into the HTML output stream
Menambahkan Adding Events Handlers
Method Description
document.getElementById(id).onclick = function(){code}
Adding event handler code to an onclick event
HTML pertama DOM Level 1 (1998), mendefinisikan 11 objek HTML, koleksi objek, dan properti. Ini masih berlaku di HTML5. Kemudian, di HTML DOM Level 3, lebih banyak objek, koleksi, dan properti ditambahkan.
Property Description DOM
(34)
Property Description DOM that have a name attribute
document.applets
Returns all <applet> elements (Deprecated in HTML5)
1
document.baseURI Returns the absolute base URI of the document 3 document.body Returns the <body> element 1 document.cookie Returns the document's
cookie 1
document.doctype Returns the document's
doctype 3
document.documentElement Returns the <html> element 3 document.documentMode Returns the mode used by
the browser 3
document.documentURI Returns the URI of the
document 3
document.domain Returns the domain name of the document server 1 document.domConfig Obsolete. Returns the DOM
configuration 3
document.embeds Returns all <embed>
elements 3
document.forms Returns all <form> elements 1 document.head Returns the <head> element 3 document.images Returns all <img> elements 1 document.implementation Returns the DOM
implementation 3
document.inputEncoding Returns the document's encoding (character set) 3 document.lastModified Returns the date and time
the document was updated 3 document.links Returns all <area> and <a> 1
(35)
Property Description DOM elements that have a href
attribute
document.readyState Returns the (loading) status
of the document 3
document.referrer
Returns the URI of the referrer (the linking document)
1
document.scripts Returns all <script> elements 3 document.strictErrorChecking Returns if error checking is
enforced 3
document.title Returns the <title> element 1 document.URL Returns the complete URL of
(1)
Kode JavaScript seringkali beberapa barisnya panjang. Lebih umum melihat atribut dengan cara memanggil fungsi:
Contoh :
<!DOCTYPE html> <html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button> <script>
function displayDate() {
document.getElementById("demo").innerHTML = Date(); }
</script>
<p id="demo"></p> </body>
</html>
Berikut adalah daftar beberapa event HTML yang umum:
Event Description
onchange An HTML element has been changed onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
LATIHAN
1. Saat tombol diklik, trigger Function () dengan sebuah event. <!DOCTYPE html>
<html> <body>
<button>Click Me</button> <p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World"; }
</script> </body> </html>
(2)
2. Elemen <span> harus melakukan sesuatu saat seseorang mengarahkan mouse ke atasnya. Cobalah untuk memperbaikinya
<!DOCTYPE html> <html>
<body>
<span someevent="this.style.color='red'">Mouse over me!</span> </body>
</html>
DOM HTML (Document Object Model)
Saat halaman web dimuat, browser membuat Document Object Model halaman. Model HTML DOM dibangun sebagai pohon Objek:
Dengan model objek, JavaScript mendapatkan semua kekuatan yang dibutuhkan untuk membuat HTML dinamis:
JavaScript dapat mengubah semua elemen HTML di halaman JavaScript dapat mengubah semua atribut HTML di halaman JavaScript dapat mengubah semua gaya CSS di halaman
JavaScript dapat menghapus elemen dan atribut HTML yang ada JavaScript dapat menambahkan elemen HTML dan atribut baru
JavaScript dapat bereaksi terhadap semua aktivitas HTML yang ada di halaman JavaScript dapat membuat acara HTML baru di halaman
Apa itu HTML DOM?
DOM HTML adalah model objek standar dan antarmuka pemrograman untuk HTML. Ini mendefinisikan:
Elemen HTML sebagai objek Properti semua elemen HTML
Metode untuk mengakses semua elemen HTML Acara untuk semua elemen HTML
(3)
Dengan kata lain: DOM HTML adalah standar untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML. Metode HTML DOM adalah tindakan yang dapat Anda lakukan (pada Elemen HTML). Properti HTML DOM adalah nilai (dari Elemen HTML) yang dapat Anda setel atau ubah.
Antarmuka Pemrograman DOM
DOM HTML dapat diakses dengan JavaScript (dan dengan bahasa pemrograman lainnya). Di DOM, semua elemen HTML didefinisikan sebagai objek.Antarmuka pemrograman adalah sifat dan metode masing-masing objek. Properti adalah nilai yang bisa Anda dapatkan atau tetapkan (seperti mengubah konten elemen HTML). Metode adalah tindakan yang dapat Anda lakukan (seperti menambahkan atau menghapus elemen HTML).
Contoh berikut mengubah konten (innerHTML) elemen <p> dengan id = "demo": <!DOCTYPE html>
<html> <body>
<h2>My First Page</h2> <p id="demo"></p> <script>
document.getElementById("demo").innerHTML = "Hello World!"; </script>
</body> </html>
Pada contoh di atas, getElementById adalah sebuah metode, sedangkan innerHTML adalah sebuah properti.
Metode GetElementById
Cara yang paling umum untuk mengakses elemen HTML adalah dengan menggunakan id elemen. Pada contoh di atas, metode getElementById menggunakan id = "demo" untuk menemukan elemennya.
Properti innerHTML
Cara termudah untuk mendapatkan konten sebuah elemen adalah dengan menggunakan innerHTML properti. Properti innerHTML berguna untuk mendapatkan atau mengganti konten elemen HTML. Properti innerHTML dapat digunakan untuk mendapatkan atau mengubah elemen HTML, termasuk <html> dan <body>. Objek dokumen HTML DOM adalah pemilik semua objek lain di halaman web Anda.
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.
(4)
Menemukan Elemen HTML
Method Description
document.getElementById(id) Find an element by element id document.getElementsByTagName(name) Find elements by tag name document.getElementsByClassName(name) Find elements by class name
Mengubah Unsur HTML
Method Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML element
element.setAttribute(attribute, value) Change the attribute value of an HTML element
element.style.property = new style Change the style of an HTML element
Menambahkan dan Menghapus Unsur
Method Description
document.createElement(element) Create an HTML element document.removeChild(element) Remove an HTML element document.appendChild(element) Add an HTML element document.replaceChild(element) Replace an HTML element
document.write(text) Write into the HTML output stream
Menambahkan Adding Events Handlers
Method Description
document.getElementById(id).onclick = function(){code}
Adding event handler code to an onclick event
HTML pertama DOM Level 1 (1998), mendefinisikan 11 objek HTML, koleksi objek, dan properti. Ini masih berlaku di HTML5. Kemudian, di HTML DOM Level 3, lebih banyak objek, koleksi, dan properti ditambahkan.
Property Description DOM
(5)
Property Description DOM that have a name attribute
document.applets
Returns all <applet> elements (Deprecated in HTML5)
1
document.baseURI Returns the absolute base URI of the document 3 document.body Returns the <body> element 1 document.cookie Returns the document's
cookie 1
document.doctype Returns the document's
doctype 3
document.documentElement Returns the <html> element 3 document.documentMode Returns the mode used by
the browser 3
document.documentURI Returns the URI of the
document 3
document.domain Returns the domain name of the document server 1 document.domConfig Obsolete. Returns the DOM
configuration 3
document.embeds Returns all <embed>
elements 3
document.forms Returns all <form> elements 1 document.head Returns the <head> element 3 document.images Returns all <img> elements 1 document.implementation Returns the DOM
implementation 3
document.inputEncoding Returns the document's encoding (character set) 3 document.lastModified Returns the date and time
the document was updated 3 document.links Returns all <area> and <a> 1
(6)
Property Description DOM elements that have a href
attribute
document.readyState Returns the (loading) status
of the document 3
document.referrer
Returns the URI of the referrer (the linking document)
1
document.scripts Returns all <script> elements 3 document.strictErrorChecking Returns if error checking is
enforced 3
document.title Returns the <title> element 1 document.URL Returns the complete URL of