Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menyatakan hubungan ibu bapa-anak dalam Javascript
Sebagai bahasa skrip, Javascript sangat memudahkan proses pembangunan bahagian hadapan kami. Antaranya, menyatakan hubungan ibu bapa-anak adalah konsep yang sangat penting Mari kita perkenalkan secara ringkas cara menyatakan hubungan ibu bapa-anak dalam Javascript.
1. Struktur pokok DOM
Mari kita bincangkan tentang struktur pokok DOM yang paling banyak digunakan dalam Javascript. Pokok HTML DOM ialah struktur hierarki di mana setiap elemen HTML menjadi sebahagian daripada perhubungan ibu bapa, anak atau adik-beradik, dan semua nod berasal daripada akar. Nod struktur pokok mempunyai konsep berikut:
Dalam pepohon DOM , nod elemen ialah titik terdekat antara nod induk dan anak. Contohnya:
<div id="parent"> <ul> <li>item 1</li> <li>item 2</li> </ul> </div>
Kita boleh mengabstrakkan sekeping kandungan HTML ke dalam struktur DOM di atas, dengan teg div
ialah elemen induk bagi teg ul
. Teg li
ialah elemen anak teg ul
dan elemen cucu teg div
. Dan bagaimana hubungan bapa-anak ini dinyatakan dalam Javascript?
2. Objek nod
Dalam Javascript, kami menggunakan objek Node untuk mewakili nod DOM ini. Objek Node ialah kelas asas untuk semua nod DOM, dan semua nod DOM mewarisi sifat dan kaedah Node. Objek nod mempunyai atribut biasa berikut:
parentNode
: menunjukkan nod induk, dan mengembalikan NULL jika tiada. childNodes
: mewakili tatasusunan nod anak. previousSibling
: mewakili nod adik beradik sebelumnya. nextSibling
: mewakili nod adik beradik seterusnya. Mengambil kod HTML di atas sebagai contoh, kita boleh mendapatkan hubungan antara nod ibu bapa dan anak dengan cara berikut:
const div = document.getElementById('parent'); const ul = div.firstElementChild; const li1 = ul.firstElementChild; const li2 = li1.nextElementSibling; console.log(ul.parentNode === div); // true console.log(li1.parentNode === ul); // true console.log(li2.previousSibling === li1); // true console.log(li1.nextSibling === li2); // true
Dalam kod di atas, kami menggunakan Kaedah getElementById
untuk mendapatkan div
, dan gunakan kaedah firstElementChild
untuk mendapatkan elemen anak pertamanya ul
. Seterusnya, kami menggunakan kaedah firstElementChild
untuk mendapatkan elemen anak pertama ul
daripada li1
dan kaedah nextElementSibling
untuk mendapatkan nod adik beradik seterusnya li1
daripada li2
. Akhir sekali, kami menggunakan sifat objek Node untuk mengesan hubungan ibu bapa-anak antara mereka.
3. Operasi ibu bapa-anak dalam jQuery
Selain menggunakan objek Node untuk mewakili hubungan antara nod ibu bapa dan anak, jQuery juga menyediakan fungsi operasi DOM yang mudah untuk mencapai fungsi yang sama. Berikut ialah beberapa contoh mudah:
parent()
: Kaedah ini mengembalikan elemen induk elemen padanan dan boleh dihantar dalam pemilih untuk menapis hasil. $('li').parent() // 返回行成父子关系的ul节点
children()
: Kaedah ini mengembalikan set semua elemen anak set elemen padanan Anda juga boleh memasukkan pemilih untuk menapis hasil. $('div').children() // 返回div下的所有子元素
siblings()
: Kaedah ini mengembalikan semua elemen adik-beradik elemen padanan Anda juga boleh memasukkan pemilih untuk menapis hasil. $('li').siblings() // 返回li的兄弟元素(不包括它自己)
Dalam contoh mudah di atas, jQuery menyediakan kaedah yang mudah untuk membantu kami mencari dan mengendalikan hubungan ibu bapa-anak nod DOM, memudahkan proses mengendalikan nod DOM dengan Javascript.
Kesimpulan
Objek nod digunakan dalam Javascript untuk mewakili hubungan induk-anak nod DOM. Apabila menggunakan objek Node, kita boleh mengakses secara langsung sifat nod, seperti parentNode
, previousSibling
, dsb., untuk mendapatkan hubungan antara nod induk dan anak. Selain itu, perpustakaan jQuery juga menyediakan fungsi yang lebih ringkas dan lebih mudah yang membolehkan kami mengendalikan dan mencari hubungan ibu bapa-anak antara nod DOM Dengan bijak menggunakan fungsi ini, kami boleh menyelesaikan kerja pembangunan bahagian hadapan dengan cepat dan meningkatkan kecekapan pembangunan bahagian hadapan.
Atas ialah kandungan terperinci Bagaimana untuk menyatakan hubungan ibu bapa-anak dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!