Bekerja dengan Hubungan Node ke Kod dengan JavaScript - patung

Pokok HTML DOM menyerupai pokok keluarga dalam hubungan hierarki antara nod. Sebenarnya, istilah teknikal yang digunakan oleh pengaturcara JavaScript untuk menggambarkan hubungan antara nod dalam pokok mengambil nama mereka dari hubungan keluarga.

• Setiap nod, kecuali nod akar, mempunyai satu induk.

• Setiap nod mungkin mempunyai bilangan kanak-kanak .

• Node dengan ibu bapa yang sama adalah adik-beradik.

Oleh kerana dokumen HTML sering mempunyai beberapa unsur yang sama, DOM membolehkan anda mengakses elemen yang berbeza dalam senarai nod menggunakan nombor indeks. Contohnya, anda boleh merujuk kepada elemen pertama

dalam dokumen sebagai p [0], dan kedua

nod elemen sebagai p [1].

Walaupun senarai nod mungkin kelihatan seperti tatasusunan, ia tidak. Anda boleh gelung melalui kandungan senarai nod, tetapi anda tidak boleh menggunakan kaedah array pada senarai nod.

Dalam kod ini, ketiga elemen

adalah semua kanak-kanak unsur. Kerana mereka mempunyai ibu bapa yang sama, mereka adalah adik beradik.

Keluarga HTML Pertama

Kedua

Ketiga


Dalam contoh di atas, komen HTML juga merupakan anak-anak dari elemen seksyen. Komen terakhir sebelum tag seksyen penutup dipanggil anak terakhir seksyen.






Dengan memahami hubungan antara nod dokumen, anda boleh menggunakan pokok DOM untuk mencari sebarang elemen dalam dokumen.
Berikut adalah dokumen HTML yang mengandungi skrip yang menghasilkan semua nod kanak-kanak unsur seksyen.
Keluarga HTML Pertama

Kedua

Ketiga


Nod dalam elemen seksyen
var myNodelist = 

dokumen. badan. childNodes [1]. kanak-kanak; untuk (i = 0; i 
");}

Inilah hasil keluaran kod ini seperti dalam pelayar. Perhatikan bahawa nod anak pertama elemen seksyen adalah nod teks. Jika anda melihat dengan teliti pada markup HTML, anda akan melihat bahawa terdapat satu ruang antara tag seksyen pembuka dan ulasan.Malah sesuatu semudah ruangan tunggal ini mewujudkan keseluruhan nod dalam pokok DOM. Fakta ini perlu dipertimbangkan apabila anda menavigasi DOM menggunakan hubungan antara nod.

Melihat output kod anda.
HTML DOM juga menyediakan beberapa kata kunci untuk menavigasi node menggunakan kedudukan mereka berbanding saudara kandung mereka atau ibu bapa. Sifat relatif adalah


firstChild: Rujukan anak pertama nod


lastChild: Rujukan anak terakhir nod


nextSibling: Rujukan node seterusnya dengan nod induk yang sama


sebelumnyaSebelum: Rujukan sebelumnya nod dengan nod induk yang sama


Contoh ini menunjukkan bagaimana anda boleh menggunakan sifat relatif ini untuk melintasi DOM.
Iguanas Tidak Fungsi Fun boldFirstAndLastNav () {document. badan. childNodes [1]. firstChild. gaya. fontWeight = "bold"; dokumen. badan. childNodes [1]. anak bongsu. gaya. fontWeight = "bold";} Home | 
href = "why. html "> Mengapa Iguana Tidak Suka? | Apa yang boleh dibuat? | Hubungi Kami
Iguana tidak menyenangkan untuk dikelilingi. Gunakan pautan di atas untuk mengetahui lebih lanjut.
boldFirstAndLastNav ();

Perhatikan bahawa semua jarak mesti dialihkan di antara unsur-unsur dalam elemen agar anak pertamaChild dan lastChild untuk mengakses elemen yang betul yang anda pilih dan gaya.
Inilah yang kelihatan seperti dokumen semasa dipratonton dalam penyemak imbas. Perhatikan bahawa hanya pautan pertama dan terakhir dalam navigasi yang berani.

Pratonton kod anda dalam penyemak imbas.
Ini adalah contoh menggunakan DOM untuk membuat perubahan pada elemen sedia ada dalam dokumen. Kaedah memilih elemen hampir tidak pernah digunakan. Ia terlalu terdedah kepada kesilapan dan terlalu sukar untuk mentafsir dan digunakan.