Dapatkan id javascript elemen anak

Sebuah HTMLCollection yang merupakan kumpulan elemen DOM langsung dan terurut yang merupakan turunan dari node. Anda dapat mengakses masing-masing simpul anak dalam koleksi dengan menggunakan metode item() pada koleksi, atau dengan menggunakan notasi gaya larik JavaScript

Jika elemen tidak memiliki anak elemen, maka children adalah daftar kosong dengan children0 dari children1

Dalam HTML DOM (Document Object Model), dokumen HTML adalah kumpulan node dengan (atau tanpa) node anak

Node adalah node elemen, node teks, dan node komentar

Spasi antar elemen juga merupakan node teks

Elemen hanyalah node elemen

childNodes vs anak-anak

childNodes mengembalikan node anak (node ​​elemen, node teks, dan node komentar)

children mengembalikan elemen anak (bukan teks dan simpul komentar)

Saudara kandung vs Saudara Elemen

Saudara kandung adalah "saudara" dan "saudara perempuan"

Sibling adalah node dengan induk yang sama (dalam daftar childNodes yang sama)

Saudara Elemen adalah elemen dengan induk yang sama (dalam daftar anak yang sama)

Sintaksis

Nilai Pengembalian

Lebih Banyak Contoh

Berapa banyak anak yang dimiliki "myDIV".

mari hitung = dokumen. getElementById("myDIV"). anak-anak. panjangnya;

Ubah latar belakang elemen anak kedua "myDIV"

koleksi const = dokumen. getElementById("myDIV"). anak-anak;
koleksi[1]. gaya. warna latar = "kuning";

Dapatkan teks elemen anak ketiga (indeks 2) dari suatu elemen. koleksi const = dokumen. getElementById("PilihSaya"). anak-anak[2]. teks; . koleksi const = dokumen. tubuh. anak-anak; . panjangnya; . gaya. backgroundColor = "red";} Coba Sendiri » Elemen Dukungan Browser. children adalah fitur DOM Level 1 (1998). Ini didukung penuh di semua browser. Chrome Edge Firefox Safari Opera IE Ya Ya Ya Ya Ya 9-11

Dalam HTML DOM (Document Object Model), dokumen HTML adalah kumpulan node dengan (atau tanpa) node anak

Node adalah node elemen, node teks, dan node komentar

Spasi antar elemen juga merupakan node teks

Elemen hanyalah node elemen

childNodes vs anak-anak

childNodes mengembalikan node anak (node ​​elemen, node teks, dan node komentar)

children mengembalikan elemen anak (bukan teks dan simpul komentar)

Saudara kandung vs Saudara Elemen

Saudara kandung adalah "saudara" dan "saudara perempuan"

Sibling adalah node dengan induk yang sama (dalam daftar childNodes yang sama)

Saudara Elemen adalah elemen dengan induk yang sama (dalam daftar anak yang sama)

Sintaksis

Nilai Pengembalian

Lebih Banyak Contoh

Ubah warna latar belakang simpul anak kedua

elemen. simpulanak[1]. gaya. warna latar = "kuning";

Dapatkan teks simpul anak ketiga dari suatu elemen. biarkan teks = dokumen. getElementById("PilihSaya"). simpulanak[2]. teks; . childNodes adalah fitur DOM Level 1 (1998). Ini didukung penuh di semua browser. Chrome Edge Firefox Safari Opera IE Ya Ya Ya Ya Ya 9-11

Dalam JavaScript HTML DOM, kita dapat dengan mudah mendapatkan elemen anak dari elemen induk menggunakan properti childNodes

Misalkan kita memiliki elemen div dan div anak di dalamnya seperti yang dapat Anda lihat di bawah dengan beberapa ID

<div id="parentDiv">
  <div id="childDiv"></div>
</div>

Pada HTML di atas, elemen div dengan ID "parentDiv" adalah elemen induk dan elemen div di dalamnya dengan ID "childDiv" adalah elemen turunan dari div induknya

Sekarang kami ingin mendapatkan elemen anak dari elemen div induk di JavaScript

JavaScript sudah memiliki properti childNodes yang dapat mengembalikan kumpulan node anak dari node, sebagai objek NodeList JavaScript. Ini dapat membantu kita melakukan apa yang sebenarnya kita inginkan

Saya tidak akan memberi tahu Anda secara detail tentang properti childNodes. Sekarang saya hanya akan menunjukkan cara mendapatkan elemen anak dari div induk kita

Untuk mendapatkan semua node anak dari node induk kami (Anda dapat memikirkannya tentang ID induk), di bawah ini adalah kode JavaScript kami

var parent = document.getElementById('parentDiv');
var childs = parent.childNodes;
console.log(childs); // Return collection of child node

Sekarang misalkan, kami ingin menerapkan properti innerHTML ke elemen anak. Untuk melakukan ini, kita hanya perlu mendapatkan elemen div dengan nomor indeks. Kita bisa melihat nomor indeks setiap node di log konsol

Baca juga

• Hasilkan kata sandi acak dalam JavaScript?
• Akses Elemen Formulir HTML dengan JavaScript DOM

Di bawah ini adalah kode di mana kita mendapatkan elemen div anak dengan nomor indeksnya dan menerapkan properti innerHTML dengan JavaScript ke elemen anak tersebut

var parent = document.getElementById('parentDiv');
var childs = parent.childNodes;
childs[1].innerHTML = "I am inside the child div";

Sekarang kita bisa melihat bahwa kita bisa mendapatkan elemen anak

Kami juga dapat menjalankan loop untuk mendapatkan setiap elemen. Misalkan, kita memiliki elemen induk dan ada beberapa elemen turunan seperti yang dapat Anda lihat pada kode HTML di bawah ini

<div id="parentDiv">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
  <div id="child5"></div>
</div>

<div id="nodenames"></div>

Elemen dengan ID "nodenames" akan berisi setiap nama node. Sekarang di bawah ini adalah JavaScript for loop untuk mendapatkan setiap nama node

var parent = document.getElementById('parentDiv');
var childs = parent.childNodes;

  var txt = "";
  var i;

  for (i = 0; i < childs.length; i++) {
    txt = txt + childs[i].nodeName + "<br>";
  }

 document.getElementById("nodenames").innerHTML = txt;

Dapatkan elemen anak pertama di JavaScript HTML DOM

Ada metode lain untuk mendapatkan elemen anak yang akan saya bahas sekarang

Properti HTML DOM firstElementChild dapat mengembalikan elemen anak pertama dari elemen tertentu yang kami sediakan. Tidak masalah berapa banyak elemen anak yang ada, itu akan selalu mengembalikan yang pertama

Lihat contoh kode di bawah ini

document.getElementById('parentDiv').firstElementChild.innerHTML = "I am inside the child div";

Contoh di atas akan melakukan tugas yang sama. Ini akan menerapkan properti innerHTML ke elemen anak pertama dari kode HTML kami yang memiliki div dengan ID "childDiv". Terlihat lebih sederhana jika kita hanya ingin mendapatkan elemen anak pertama

2 tanggapan untuk “Dapatkan elemen anak di JavaScript HTML DOM”

1. bethropolis .

   terima kasih ini sangat membantu, saya menggunakannya sebaliknya untuk mendapatkan orang tua dari anak pertama

   Bagaimana cara mendapatkan id elemen anak dalam JavaScript?

   Untuk mendapatkan elemen anak pertama dari elemen tertentu, Anda menggunakan properti firstChild dari elemen tersebut. .

   biarkan firstChild = parentElement. anak pertama;.

   biarkan konten = dokumen. getElementById('menu'); . anak pertama. nodeName; . log(anak pertama);.

   #teks

   Bagaimana cara mendapatkan id div anak saya?

   Di bawah ini adalah kode di mana kita mendapatkan elemen div anak dengan nomor indeksnya dan menerapkan properti innerHTML dengan JavaScript ke elemen anak tersebut. var induk = dokumen. getElementById('induk Div'); . childNodes;

   Bagaimana saya bisa mendapatkan ID elemen menggunakan JavaScript?

   Untuk mendapatkan elemen berdasarkan id dalam javascript, kita dapat menggunakan fungsi bawaan getElementById() untuk mendapatkan elemen HTML apa pun hanya dengan memberikan tag id mereka. If there is no element with the id with is given then it will return null. As we know that id of an element is unique in HTML.

   Bagaimana cara mendapatkan semua elemen anak dalam JavaScript?

   Untuk mendapatkan semua node turunan dari suatu elemen, Anda dapat menggunakan properti childNodes . Properti ini mengembalikan kumpulan node anak node, sebagai objek NodeList. Secara default, node dalam koleksi diurutkan berdasarkan tampilannya di kode sumber. Anda dapat menggunakan indeks numerik (mulai dari 0) untuk mengakses setiap node.

   Bagaimana cara mendapatkan div anak di JavaScript?

   var induk = dokumen. getElementById("induk"); . childNodes[0]; . nilai;