Bagaimana untuk mendapatkan elemen dom dalam javascript

Kaedah mendapatkan: 1. "document.getElementById(value)" diperoleh melalui nilai ID; 2. "document.getElementsByName(value)" diperoleh melalui atribut nama; firstChild" diperoleh melalui pemerolehan nod Induk dan sebagainya.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Ringkasan kaedah JavaScript untuk mendapatkan elemen nod DOM HTML

Dalam pembangunan aplikasi Web, terutamanya program Web2.0, ia adalah selalunya diperlukan untuk mendapatkan elemen dalam halaman, dan kemudian mengemas kini gaya elemen, kandungan, dsb. 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 Pemerolehan nod

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

Pada masa kini, terdapat banyak perpustakaan JavaScript seperti prototaip dan Mootools, yang menyediakan kaedah yang lebih mudah: $(id), dan parameter masih merupakan 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 memperoleh 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 kedua-duanya 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 array 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: Anda boleh menggunakan ini jika nod ialah nod anak pertama bagi nod yang diketahui (parentObj ) kaedah. 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 anak pertama, ia juga boleh digunakan secara rekursif.
Dalam penggunaan, jika kita menggabungkan kedua-duanya, kita akan mencapai kesan yang lebih menarik, iaitu: parentObj.firstChild.lastChild.lastChild...

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

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

(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) neighbourNode.previousSibling: Dapatkan nod sebelumnya bagi nod yang diketahui (Nod jiran ini adalah sama dengan FirstChild sebelumnya, LastChild juga nampaknya boleh digunakan secara rekursif.

(2) neighbourNode.nextSibling: Dapatkan nod seterusnya bagi nod yang diketahui (Node jiran), 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 pelbagai kaedah di atas secara fleksibel, saya percaya anda sepatutnya dapat mengendalikan kebanyakan program.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan elemen dom dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!