Html elemen induk dan anak

Dapatkan akses penuh ke Desain Web Singkatnya, Edisi ke-3, dan 60K+ judul lainnya, dengan uji coba gratis O'Reilly selama 10 hari

Ada juga acara online langsung, konten interaktif, materi persiapan sertifikasi, dan banyak lagi

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

TypeDescriptionObjectA Objek HTMLCollection
Kumpulan node elemen
Elemen diurutkan saat muncul di dokumen

Lebih Banyak Contoh

Berapa banyak anak yang dimiliki "myDIV".

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

Cobalah sendiri "

Ubah latar belakang elemen anak kedua "myDIV"

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

Cobalah sendiri "

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

Jadi di dalam elemen html ada dua elemen, head dan body. Di dalam elemen head ada dua elemen, title dan meta. Di dalam elemen body ada dua elemen, h1 dan


  
    I'm an HTML page!
    
  
  
    Hello!
    

Just a bit of text here.

0

kepala dan tubuh adalah anak-anak dari html. html adalah induk dari head dan body. judul dan meta adalah anak kepala. head adalah induk dari title dan meta. h1 dan p adalah anak-anak dari tubuh. body adalah induk dari h1 dan p

Sebuah elemen dapat memiliki banyak anak. Sebuah elemen selalu memiliki satu induk kecuali elemen tersebut, yang merupakan akar dari pohon

Apa itu tag induk dalam HTML?

Definisi dan Penggunaan . Perbedaan antara parentElement dan parentNode, adalah parentElement mengembalikan null jika node induk bukan node elemen. tubuh. parentNode; . The parentElement property returns the parent element of the specified element. The difference between parentElement and parentNode, is that parentElement returns null if the parent node is not an element node: body. parentNode; // Returns the element.

Bagaimana cara menggunakan div induk dan anak di CSS?

Menerapkan gaya ke elemen turunan itu mudah, tetapi jika Anda ingin menerapkan gaya ke kelas induk yang sudah memiliki elemen turunan, Anda dapat menggunakan kombinator anak pemilih CSS ( . Misalnya, div > p memilih semua elemen . For example, div > p selects all

elements where the parent is a

element.

Bagaimana Anda menemukan elemen anak dari elemen induk?

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

Apa itu elemen saudara dalam HTML?

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)