2 Contoh Penggunaan Properti Children DOM pada HTML

Properti children DOM pada HTML digunakan untuk mengembalikan HTMLcollection dari semua elemen child pada elemen spesifik. Nilai elemen pada koleksi dapat diakses melalui angka indeks. Properti ini berbeda dari properti childNodes, dimana properti childNodes mengandung semua jenis node termasuk juga tipe teks dan node komentar. Sedangkan, properti children hanya mengandung elemen node saja, dan properti ini hanya bersifat read-only.

Sintak:
element.children

Return Value: berfungsi untuk mengembalikan koleksi dari elemen node yang dapat diakses melalui nilai indeksnya.

Contoh: berfungsi untuk mengembalikan angka dari list item.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti children DOM pada 

HTML

</title>

 

<!-- Script untuk menghitung 

nilai children dari atribut 

parent -->

<script>

function Bons() 

{

var count =

document.getElementById("parent").children.length;

document.getElementById("p").innerHTML =

"No of Children: " 

+ count;

}

</script>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti children DOM

</h2>

 

<p>

Algoritm Searching

</p>

 

<ul id="parent">

<li>Merge sort</li>

<li>Quick sort</li>

</ul>

 

<button onclick="Bons()">

Klik Disini!

</button>

 

<p id="p"></p>

 

</body>

 

</html>

Output:

Blog Elfan

Properti children DOM

Algoritm Searching

  • Merge sort
  • Quick sort



Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti children DOM pada 

HTML

</title>

 

<script>

function Bons() 

{

var doc =

document.getElementById("parent").children;

var i;

 

for(i = 0; i < doc.length; i++

{

doc[i].style.color = "white";

doc[i].style.backgroundColor = "green";

}

 

}

</script>

</head>

 

<body style = "text-align:center">

 

<h1 style = "color:green;">

Blog Elfan

</h1>

 

<h2>

Properti children DOM

</h2>

 

<div id = "parent">

<p>

Blog TIK

</p>

 

<p>

Portal Ilmu Komputer

</p>

</div>

 

<button onclick = "Bons()">

Klik Disini!

</button>

 

</body>

 

</html>

Output:

Blog Elfan

Properti children DOM

Blog TIK

Portal Ilmu Komputer

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method Children DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan method Children DOM pada HTML:
      1. Google Chrome 2.0
      2. Internet Explorer 9.0*
      3. Firefox 3.5
      4. Opera 10.0
      5. Apple Safari 4.0

      Hapus
  2. Apa yang dimaksud dengan properti children beserta fungsinya pada DOM HTML?

    BalasHapus
    Balasan
    1. Properti children atau properti anak pada DOM HTML digunakan untuk mengembalikan semua elemen child dari elemen yang ditentukan dalam bentuk koleksi pada HTML. Properti children bersifat read-only, yang elemen-elemennya diperoleh dan kemudian dapat diakses dengan menggunakan nomor indeks yang dimulai dari angka o. Elemen-eleme tersebut muncul dalam bentuk urutan yang sama seperti dalam dokumen HTML.

      Hapus
    2. Properti children berfungsi untuk mengembalikan koleksi elemen dari child elemen. Properti children mengembalikan object berupa HTMLCollection.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C