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:

1. Nod elemen: mewakili elemen HTML
2. Nod teks: mewakili kandungan teks elemen
3. Atribut nod: mewakili atribut elemen
4. Nod dokumen: mewakili keseluruhan dokumen HTML
5. Nod komen: mewakili kandungan ulasan dalam HTML

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:

1. parentNode: menunjukkan nod induk, dan mengembalikan NULL jika tiada.
2. childNodes: mewakili tatasusunan nod anak.
3. previousSibling: mewakili nod adik beradik sebelumnya.
4. 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:

1. parent(): Kaedah ini mengembalikan elemen induk elemen padanan dan boleh dihantar dalam pemilih untuk menapis hasil.

$('li').parent() // 返回行成父子关系的ul节点

2. children(): Kaedah ini mengembalikan set semua elemen anak set elemen padanan Anda juga boleh memasukkan pemilih untuk menapis hasil.

$('div').children() // 返回div下的所有子元素

3. 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!