Ringkasan 11 cara untuk mendapatkan elemen DOM dalam petua JavaScript_javascript

Dalam pembangunan aplikasi Web, terutamanya program Web 2.0, selalunya perlu untuk mendapatkan elemen dalam halaman dan kemudian mengemas kini gaya, kandungan, dsb. elemen tersebut. Bagaimana untuk mendapatkan elemen untuk dikemas kini adalah masalah pertama yang perlu diselesaikan. Nasib baik, terdapat banyak cara untuk mendapatkan nod menggunakan JavaScript Berikut ialah ringkasan ringkas (kaedah berikut telah diuji dalam IE7 dan Firefox2.0.0.11):

1. Dapatkan melalui nod dokumen peringkat atas:

(1) document.getElementById(elementId): Kaedah ini boleh mendapatkan elemen yang diperlukan dengan tepat melalui ID nod Ia adalah kaedah yang agak mudah dan pantas. Jika halaman mengandungi berbilang nod dengan ID yang sama, hanya nod pertama akan dikembalikan.

Kini, banyak perpustakaan JavaScript seperti prototaip dan Mootools telah muncul, yang menyediakan kaedah yang lebih mudah: $(id), dan parameternya masih id nod. Kaedah ini boleh dianggap sebagai cara lain untuk menulis document.getElementById(), tetapi fungsi $() adalah lebih berkuasa untuk kegunaan tertentu, sila rujuk dokumen API masing-masing.

(2) document.getElementsByName(elementName): Kaedah ini mendapat nod dengan namanya Seperti yang boleh dilihat daripada namanya, kaedah ini mengembalikan bukan elemen nod, tetapi tatasusunan nod dengan nama yang sama. Kemudian, kita boleh gelung melalui atribut tertentu nod untuk menentukan sama ada ia adalah nod yang diperlukan.

Contohnya: Dalam HTML, kotak semak dan radio menggunakan nilai atribut nama yang sama untuk mengenal pasti elemen dalam kumpulan. Jika kita ingin mendapatkan elemen yang dipilih sekarang, kita mula-mula mendapatkan elemen yang dikocok, dan kemudian gelung untuk menentukan sama ada nilai atribut yang disemak bagi nod adalah benar.

(3) document.getElementsByTagName(tagName): Kaedah ini mendapatkan nod melalui Tagnya Kaedah ini juga mengembalikan tatasusunan Sebagai contoh: document.getElementsByTagName('A') akan mengembalikan semua nod hiperpautan pada halaman. Sebelum mendapatkan nod, jenis nod diketahui umum, jadi agak mudah untuk menggunakan kaedah ini. Tetapi kelemahannya juga jelas, iaitu, tatasusunan yang dikembalikan mungkin sangat besar, yang akan membuang banyak masa. Jadi, adakah kaedah ini tidak berguna? Sudah tentu tidak. Kaedah ini berbeza daripada dua di atas Ia bukan kaedah proprietari nod dokumen dan juga boleh digunakan pada nod lain, yang akan disebutkan di bawah.

2. Dapatkan melalui nod induk:

(1) parentObj.firstChild: Kaedah ini boleh digunakan jika nod ialah nod anak pertama bagi nod yang diketahui (parentObj). Atribut ini boleh digunakan secara rekursif, iaitu, ia menyokong bentuk parentObj.firstChild.firstChild.firstChild..., supaya nod yang lebih dalam boleh diperolehi.

(2) parentObj.lastChild: Jelas sekali, atribut ini adalah untuk mendapatkan nod anak terakhir bagi nod yang diketahui (parentObj). Seperti firstChild, ia juga boleh digunakan secara rekursif.

Dalam penggunaan, jika kita menggabungkan kedua-duanya, kita akan mencapai kesan yang lebih mengujakan iaitu: parentObj.firstChild.lastChild.lastChild...

(3) parentObj.childNodes: Dapatkan tatasusunan nod anak bagi nod yang diketahui, dan kemudian cari nod yang diperlukan melalui gelung atau pengindeksan.

Nota: Selepas ujian, didapati bahawa pada IE7, apa yang diperolehi ialah tatasusunan nod anak langsung, manakala pada Firefox2.0.0.11, apa yang diperolehi adalah semua nod anak, termasuk nod anak nod anak. .

(4) parentObj.children: Dapatkan tatasusunan nod anak langsung bagi nod yang diketahui.

Nota: Selepas ujian, pada IE7, kesannya adalah sama seperti childNodes, tetapi Firefox2.0.0.11 tidak menyokongnya. Inilah sebabnya saya menggunakan gaya yang berbeza daripada kaedah lain. Oleh itu penggunaannya tidak digalakkan.

(5) parentObj.getElementsByTagName(tagName): Kaedah penggunaan tidak akan diterangkan secara terperinci Ia mengembalikan tatasusunan nod anak bagi nilai yang ditentukan antara semua nod anak nod yang diketahui. Contohnya: parentObj.getElementsByTagName('A') mengembalikan semua hiperpautan dalam nod anak yang diketahui.

3. Dapatkan melalui nod bersebelahan:

(1) neighborNode.previousSibling: Dapatkan nod sebelumnya bagi nod yang diketahui (neighbourNode) Atribut ini nampaknya digunakan secara rekursif seperti FirstChild dan lastChild sebelumnya.

(2) neighborNode.nextSibling: Dapatkan nod seterusnya bagi nod yang diketahui (neighbourNode), juga menyokong rekursi.

4. Dapatkan melalui nod anak:

(1) childNode.parentNode: Dapatkan nod induk bagi nod yang diketahui.

Kaedah yang dinyatakan di atas hanyalah beberapa kaedah asas Jika anda menggunakan perpustakaan JavaScript seperti Prototaip, anda juga boleh mendapatkan kaedah lain yang berbeza, seperti mendapatkan melalui kelas nod, dsb. Walau bagaimanapun, jika anda boleh menggunakan kaedah di atas secara fleksibel, saya percaya anda sepatutnya dapat mengendalikan kebanyakan program.