Lompat ke konten Lompat ke sidebar Lompat ke footer

Properti firstChild DOM HTML dan Fungsinya

Properti firstChild DOM pada HTML digunakan untuk mengembalikan node firstchild dari elemen node parent. Properti firstChild merupakan properti read-only dan tidak membutuhkan teks node dan node komentar.

2 Contoh Penggunaan Properti firstChild DOM pada HTML
Ilustrasi firstChild DOM HTML

Sebelum memahami lebih dalam materi tentang Properti firstChild DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Keluar Fullscreen HTML Menggunakan exitFullscreen DOM [klik], Properti Dir HTML DOM dan Fungsinya [klik], dan Properti Contains DOM HTML dan Fungsinya [klik].

Sintak:
node.firstChild

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan child pertama dari sebuah node. Jika elemen tidak memiliki node child, maka method ini akan mengembalikan nilai null.

Baca Juga:

Catatan: spasi kosong pada elemen parent dipertimbangkan sebagai teks, dan teks dipertimbangkan sebagai sebuah node.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

h1 

{

color: green;}

</style>

</head>

 

<body style="margin-left:140px;">

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti firstChild DOM

</h2>

 

<p>

Daftar algoritma

pengurutan::

</p>

<ul id="MKN">

<li>Merge Sort</li>

<li>Quick Sort</li>

<li>Selection Sort</li>

<li>Bubble Sort</li>

</ul>

 

<button 

onclick="Bons()">

Submit

</button>

 

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

 

<script>

function Bons() 

{

var x =

document.getElementById("MKN").firstChild.innerHTML;

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

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti firstChild DOM

Daftar algoritmapengurutan::

  • Merge Sort
  • Quick Sort
  • Selection Sort
  • Bubble Sort



Contoh: mendapatkan node name dari first child.

<!DOCTYPE html>

<html>

 

<head>

<style>

h1 

{

color: green;}

 

#MKN 

{

font-size: 20px;}

</style>

</head>

 

<body style="margin-left:140px;">

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti firstChild DOM

</h2>

 

<div id="MKN">

<p>Node Pertama</p>

<span>Node Kedua</span>

<p>NodeKetiga</p>

</div>

 

<br>

 

<button 

onclick="Bons()">

Submit

</button>

 

<

id="sudo" 

style="font-size:25PX;">

</p>

 

<script>

function Bons() 

{

var x =

document.getElementById("MKN").firstChild.nodeName;

document.getElementById("sudo").innerHTML =

"node name dari node child " +"pertama dari sebuah" 

+" elemen <div>:" 

+x;

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti firstChild DOM

Node Pertama

Node Kedua

NodeKetiga



Artikel ini didedikasikan kepada: Fitri Ekma Setyobekti, Gracia Sandra Nourma Yunita, Habibah Dwi Yunisari Harsono, Hana Safitri, dan Hanifan Faza Setiaji.

5 komentar untuk "Properti firstChild DOM HTML dan Fungsinya"

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

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

      Hapus
  2. Apa yang dimaksud dengan properti firstChild DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti firstChild DOM HTML berfungsi untuk mengembalikan node child pertama atau firstchild dari sebuah node awal dalam bentuk object node.

      Hapus
    2. Properti firstChild merupakan properti yang bersifat read-only dari interface node yang mengembalikan child pertama dari suatu tree, atau jika bernilai null maka node tidak akan mengembalikan nilai child apapun (mandul). Jika node adalah sebuah Document, maka properti firstChild akan mengembalikan node pertama dalam bentuk daftar turunan langsungya.

      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 -