DOM ( Document Object Model )
• DOM adalah representasi javascript
dari sebuah halaman web
• ini adalah jendela javascript mu untuk
masuk kedalam kontent dari halaman
web
• ini hanya sekelompok object yang kamu
bisa berinteraksi dengan javascript
• DOM bisa diakses dengan keyword
‘Document’
Mengakses elemen yang spesifik
• getElementById()
• getElementByName()
• getElementByClassName()
• querySelector()
• querySelectorAll()
Mengakses elemen yang spesifik
Mengakses elemen yang spesifik
Mengakses elemen berdasarkan nama id nya
document.getElementById( nama ID)
Mengakses beberapa elemen berdasarkan nama class nya
document.getElementsByClassName( nama Class)
Mengakses elemen menggunakan Selector css
document.querySelector( selector Css )
Mengakses beberapa elemen menggunakan Selector css
document.querySelectorAll( selector Css )
Mengakses elemen yang spesifik
document.getElementById(“header”);
document.getElementById(“input”)
document.querySelectorAll(“iniSpan”)
Seperti di css, Dengan kita dapat memilih
elemen, maka kita juga dapat merubah /
format elemen tersebut.
Menampilkan menggunakan InnerText VS innerHTML
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<h1 id="judul"><i>Ini Judul</i></h1> <h1 id="judul"><i>Ini Judul</i></h1>
<script> <script>
var tekJudul = document.getElementById("judul"); var tekJudul = document.getElementById("judul");
console.log(tekJudul.innerText); console.log(tekJudul.innerHTML);
</script> </script>
</body> </body>
</html> </html>
Contoh Properti yang bisa di format
dalam elemen
InnerText = mendapatkan text saja
Inner HTML = mendapatkan text beserta
kode html nya
Merubah Text menggunakan InnerText VS innerHTML
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<h1 id="judul"><i>Ini Judul</i></h1> <h1 id="judul"><i>Ini Judul</i></h1>
<script> <script>
var tekJudul = document.getElementById("judul"); var tekJudul = document.getElementById("judul");
tekJudul.innerText = "<i>Judul Dirubah</i>"; tekJudul.innerHTML = "<i>Judul Dirubah</i>";
</script> </script>
</body> </body>
</html> </html>
Praktek!!!
<!DOCTYPE html>
<html> 1. Tanpa Menyentuh program HTML nya,
<head> copas program tersebut dan buatlah file
</head> script.js
<body>
<h1> Kegiatan Hari Ini</h1>
2. Dapatkan /akses elemen menggunakan
<ul> keyword di slide nomor 3
<li class="done">Mandi</li>
<li>Sarapan</li>
<li class="done">Sekolah</li> Elemen yang harus didapatkan / akses :
<li class="done">Main</li>
<li>Olahraga</li>
• elemen dengan class done
• button dengan id reset
</ul>
• button dengan atribut type=”submit”
<button id="reset" type="reset"> Hapus List </button>
<button type="submit"> Tambah Kegiatan </button>
</body>
</html>
Javascript Event
• Javascript Event
Adalah sesuatu yang
terjadi pada element
• Dengan ini kita bisa
membuat program js,
hanya pada saat
kejadian tertentu
pada element
Syntax Basic JS Event
Contoh
Syntax Basic JS Event
Event Description
onChange Event jika sebuah element html di rubah nilainya
onClick Event jika sebuah element html di click
onMouseOver Event jika sebuah element html di letakan di cursor
mouse
onmouseout Event jika cursor mouse meninggalkan element HTML
onkeydown Event jika terjadi pengetikan di keyboard
onload Event jika element atau halaman selesai di load
Syntax
Contoh
Praktek
<html lang="en">
<head></head>
Masih di file yang sama, tugasnya :
<body> 1. Dapatkan / akses, elemen dengan id:
<h1 id="judul">Ini Judul</h1>
<h2 id="subjudul">Ini Subjudul</h2> 1. inputKomentar
<div id="post"> 2. btnKomentar
<p class="content">ini Kontent 1</p> 3. divKomentar
<p class="content">ini Konten 2</p>
<p class="content">Ini Konten 3</p> 2. Buatlah Event yang pada saat button
</div>
komentar ditekan,
<h2>Komentar</h2>
<div id=”divKomentar”></div> 3. merubah paragraf konten 1 menjadi
<input type="text" id="inputKomentar" /> paragraf 1 ketika button di click
<button id="btnKomentar">Kirim</button>
<script src="script.js"></script>
</body>
</html>
