DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mendapatkan Node Child HTML Menggunakan childNodes DOM

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.

3 Contoh Penggunaan Properti childNodes DOM pada HTML
Ilustrasi childNodes DOM HTML

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.

  • 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

Hubungi admin melalui Wa : +62-896-2514-6106

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

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

~ Ikatlah Ilmu dengan Memostingkannya ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas