Kelebihan ini menjadikan javascript banyak sekali diminati oleh para developer website.
Selain membuat, Anda juga bisa memaipulasi element HTML seperti menambah, mengedit, mengubah maupun menghapus element HTML beserta isinya.
Saya pribadi, sangat menyarankan Anda untuk memanfaatkan fitur ini pada javascript.
Javascript DOM Element Method dan Properti terbagi menjadi 5 bagian:
1# Poperti childElementCount
Properti yang digunakan untuk menghitung jumlah anak / turunan dari suatu element HTML.Contoh Format:
var hitung = element.childElementCount;
console.log(hitung);Contoh Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Child Element Count</title>
</head>
<body>
<ul id="list">
<li>Acura</li>
<li>Alfa Romeo</li>
<li>Aston Martin</li>
<li>Audi</li>
<li>Bantley</li>
<li>BMW</li>
<li>Bugatti</li>
<li>Buick</li>
</ul>
<p id="hasil"></p>
<button onclick="hitung()">Hitung Element</button>
<script type="text/javascript">
function hitung(){
var ul = document.getElementById('list').childElementCount;
document.getElementById('hasil').innerHTML = "Jumlah Turunan List = "+ul;
}
</script>
</body>
</html>2# Properti Children
Properti yang digunakan untuk menunjukan koleksi anak / turunan dari sebuah element HTML.Contoh Format:
var turunan = element.children;
console.log(turunan);Contoh Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Children</title>
</head>
<body>
<ul id="list">
<li>Acura</li>
<li>Alfa Romeo</li>
<li>Aston Martin</li>
<li>Audi</li>
<li>Bantley</li>
<li>BMW</li>
<li>Bugatti</li>
<li>Buick</li>
</ul>
<p id="hasil"></p>
<button onclick="hitung()">Hitung Turunan</button>
<script type="text/javascript">
function hitung(){
var ul = document.getElementById('list').children;
for(var i = 0; i < ul.length; i++){
var hasil = ul[i];
document.getElementById('hasil').innerHTML = "Jumlah Turunan List = "+i;
}
}
</script>
</body>
</html>3# Properti First Child dan Last Child
Properti First Child menunjukan anak pertama dari sebuah elemen HTML.Sedangkan Last Child menunjukan anak terakhir dari sebuah element HTML.
Contoh Format:
// First Child
var pertama = element.firstChild;
console.log(pertama);
// Last Child
var terakhir = element.lastChild;
console.log(terakhir);Contoh Program:
<!DOCTYPE html>
<html>
<head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Drink</li><li>Jus</li><li>Yogurt</li></ul>
<button onclick="pertama()">Tampilkan List Pertama</button>
<button onclick="terakhir()">Tampilkan List Terakhir</button>
<p id="demo"></p>
<script>
function pertama() {
var list = document.getElementById("myList").firstChild.innerHTML;
document.getElementById("demo").innerHTML = list;
}
function terakhir() {
var list = document.getElementById("myList").lastChild.innerHTML;
document.getElementById("demo").innerHTML = list;
}
</script>
</body>
</html>4# Properti createElement, appendChild dan removeChild
Method createElement untuk membuat sebuah elemen HTML melalui Javascript.Formatnya:
var li = document.createElement("li");
console.log(li);Sedangkan method appendChild berfungsi untuk menambahkan anak pada sebuah elemen HTML.
Formatnya:
var ul = document.getElementById("my-ul");
var li = document.createElement("li");
ul.appendChild(li);Terakhir adalah method removeChild yaitu untuk menghapus sebuah child dari elemen HTML.
Formatnya:
var ul = document.getElementById("my-ul");
// menghapus element pertama
ul.removeChild(ul.children[0]);Contoh Program:
<!DOCTYPE html>
<html>
<head>
<title>Latihan DOM Method dan Properti</title>
</head>
<body>
<div id="induk">
<p>kalimat 1</p>
<p>kalimat 2</p>
<p>kalimat 3</p>
</div>
<button onclick="remove()">Hapus Element Pertama</button>
<script type="text/javascript">
// createElement
var turunan = document.createElement("p");
var isi = document.createTextNode("kalimat 4");
// appendChild
turunan.appendChild(isi);
var induk = document.getElementById("induk");
induk.appendChild(turunan);
// removeChild
function remove(){
induk.removeChild(induk.children[0]);
}
</script>
</body>
</html>Demikianlah tutorial DOM Method dan Properti pada Javascript kali ini.
Semoga tutorial ini bermanfaat buat Anda sekaligus menambah pengetahuan Anda pada bidang web developer.
Ammin.
Comments