3 Contoh Penggunaan Properti childNodes DOM pada HTML

Properti childNodes berfungsi untuk mengembalikan sebuah node child sebagai object nodeList. Karakter spasi dan komentar juga dipertimbangkan sebagai sebuah node pada penggunaan properti ini. Node yang digunakan pada properti ditandai sebagai angka indeks yang dimulai dari 0. Juga, proses searching dan sorting dapat dilakukan menggunakan angka indeks pada node list.

Sintak:
elementNodeReference.childNodes;

Return Value: berfungsi untuk mengembalikan sebuah koleksi dari node child dari note tertentu sebagai sebuah object nodeList beserta karakter spasi, teks, dan komentar, yang dianggap sebagai sebagai node.

Properti:
  • properti length: berfungsi untuk menentukan angka dari node child dari suatu object. Properti ini hanya bersifat read-only.

Sintak:
  • elementNodeReference.childNodes.length;
  • elementNodeReference.childNodes[index_number].length;

Contoh: menampilkan properti length.

<!DOCTYPE html>

<html>

 

<body>

 

<h1>

<center>

 

Klik

 

<button onclick="node()">

Disini

</button>

 

</center>

</h1>

 

<h4>

Klik tombol 'Disini' untuk 

mengembalikan nilai length

dari childNodes[0].

</h4>

 

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

 

<script>

function node() 

{

// Return nilai length dari 

// child node.

var c = document.getElementsByTagName(

"BUTTON")[0];

var x = c.childNodes[0].length;

document.getElementById("mkn").innerHTML = x;

}

</script>

 

</body>

 

</html>

Output:

Klik

Klik tombol 'Disini' untuk mengembalikan nilai length dari childNodes[0].



Properti nodeName: berfungsi untuk mengembalikan nama dari node spesifik. Jika node adalah elemen dari node, maka akan mengembalikan tag name, namun jika node adalah atribut node, maka akan mengembalikan atribut name. Juga, jika bukan kedua tipe tersebut maka akan mengembalikan node dalam tipe yang berbeda, dengan nama yang berbeda pula.

Sintak:
elementNodeReference.childNodes[index_number].nodeName;

Contoh: menampilkan properti nodeName.

<!DOCTYPE html>

<html>

 

<body>

 

<h1>

<center>

 

Klik

 

<button onclick="node()">

Disini

</button>

 

</center

</h1>

 

<h4>

Klik tombol 'Disini' untuk 

mengembalikan nilai name dari 

childNodes[0].

</h4>

 

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

 

<script>

function node() 

{

// Return nilai name dari node 

// name spesifik.

var c = document.getElementsByTagName(

"BUTTON")[0];

var x = c.childNodes[0].nodeName;

document.getElementById("mkn").innerHTML = x;

}

</script>

 

</body>

 

</html>

Output:

Klik

Klik tombol 'Disini' untuk mengembalikan nilai name dari childNodes[0].



Properti nodeValue: berfungsi untuk mengatur dan mengembalikan value dari node spesifik.

Sintak:
elementNodeReference.childNodes[index_number].nodeValue;

Contoh: menampilkan properti nodeValue.

<!DOCTYPE html>

<html>

 

<body>

 

<h1>

<center>

 

Klik

 

<button onclick="node()">

Disini

</button>

 

</center

</h1>

 

<h4>

Klik tombol 'Disini' untuk 

mengembalikan value node dari 

childNodes[0].

</h4>

 

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

 

<script>

function node() 

{

// Return node value.

var c = document.getElementsByTagName("BUTTON")[0];

var x = c.childNodes[0].nodeValue;

document.getElementById("mkn").innerHTML = x;

}

</script>

 

</body>

 

</html>

Output:

Klik

Klik tombol 'Disini' untuk mengembalikan value node dari childNodes[0].

Komentar

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

    BalasHapus
    Balasan
    1. Berikut adalah jenis browser yang dapat digunakan untuk mengaktifkan method childNodes DOM pada HTML:
      1. Google Chrome
      2. Firefox
      3. Internet Explorer
      4. Opera
      5. Safari

      Hapus
  2. Apa fungsi dari properti childNodes DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti childNodes berfungsi untuk mengembalikan koleksi atau daftar node dari child elemen. Properti childNodes mengembalikan object NodeList yang bersifat read-only.

      Hapus
  3. Apa perbedaan antara childNodes dan child property pada DOM HTML?

    BalasHapus
    Balasan
    1. Properti childNodes mengembalikan semua child node, termasuk juga teks, dan node komentar, sedangkan child properti hanya mengembalikan child elemen saja.

      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