Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mendapatkan Node Child HTML Menggunakan childNodes DOM

Dipublikasikan Oleh: elfanmauludi 6 komentar
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

Sebelum memahami lebih dalam materi tentang Mendapatkan Node Child HTML Menggunakan childNodes DOM, terlebih dahulu pelajari materi tentang: Menghitung Elemen Child HTML Menggunakan childElementCount DOM [klik], Menghapus Fokus Keyboard HTML Menggunakan Method Blur DOM [klik], dan Atribut Properti DOM HTML dan Fungsinya [klik].

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].


Artikel ini didedikasikan kepada: Erwin Manik, Fadilla Rachman Darmawansyah. R., Fadlan Satya Hakim, Fadzilah Sukmawati, dan Fahnida Kiftiya.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Mendapatkan Node Child HTML Menggunakan childNodes DOM"

  1. AnonimKamis, 10 Februari 2022 pukul 07.23.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimKamis, 10 Februari 2022 pukul 07.24.00 WIB

      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. AnonimRabu, 23 Februari 2022 pukul 12.14.00 WIB

    Apa fungsi dari properti childNodes DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 23 Februari 2022 pukul 12.14.00 WIB

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

      Hapus
  3. AnonimRabu, 23 Februari 2022 pukul 12.15.00 WIB

    Apa perbedaan antara childNodes dan child property pada DOM HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 23 Februari 2022 pukul 12.15.00 WIB

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

      Hapus

Hubungi admin melalui Wa : +62-896-2414-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 -
- Big things start from small things -