Dalam pengembangan aplikasi web, terutama program Web2.0, seringkali perlu untuk mendapatkan elemen di halaman dan kemudian memperbarui gaya, konten, dll. Dari elemen. Cara mendapatkan elemen yang diperbarui adalah masalah pertama yang akan diselesaikan. Sangat menyenangkan bahwa ada banyak cara untuk mendapatkan node menggunakan JavaScript. Berikut adalah ringkasan singkat (metode berikut diuji di IE7 dan Firefox 2.0.0.11):
1. Dapatkan melalui simpul dokumen tingkat atas:
(1) Document.getElementById (ElementId): Metode ini dapat secara akurat mendapatkan elemen yang diperlukan melalui ID simpul, yang merupakan metode yang relatif sederhana dan cepat. Jika halaman berisi beberapa node dengan ID yang sama, maka hanya node pertama yang dikembalikan.
Saat ini, beberapa pustaka JavaScript seperti prototipe dan mootool telah muncul, yang memberikan metode yang lebih sederhana: $ (id), dan parameternya masih merupakan id node. Metode ini dapat dianggap sebagai
Cara lain untuk menulis document.getElementById (), tetapi fungsi $ () lebih kuat. Untuk penggunaan tertentu, silakan merujuk ke dokumen API masing -masing.
(2) Document.GetElementsByName (ElementName): Metode ini memperoleh node melalui nama node. Dari namanya, dapat dilihat bahwa metode ini mengembalikan bukan elemen simpul, tetapi array node dengan nama yang sama. Kemudian, kita dapat mengulangi atribut node untuk mendapatkan loop untuk menentukan apakah itu node yang diperlukan.
Misalnya: Di HTML, kotak centang dan radio keduanya menggunakan nilai atribut nama yang sama untuk mengidentifikasi elemen dalam suatu grup. Jika kita ingin mendapatkan elemen yang dipilih sekarang, pertama -tama kita mendapatkan elemen yang dikocok, dan kemudian loop untuk menentukan apakah nilai atribut yang diperiksa dari node benar.
(3) Document.GetElementsByTagname (TagName): Metode ini memperoleh node melalui tag node, dan metode ini juga mengembalikan array, misalnya:
Document.getElementsByTagname ('A') akan mengembalikan semua node hyperlink pada halaman. Sebelum memperoleh node, Anda biasanya tahu jenis node, jadi menggunakan metode ini relatif sederhana. Tetapi kerugiannya juga jelas, yaitu, array yang dikembalikan mungkin sangat besar, yang akan membuang banyak waktu. Jadi, apakah metode ini tidak berguna? Tentu saja tidak. Metode ini berbeda dari dua di atas. Ini bukan metode eksklusif dari node dokumen. Node lain juga dapat diterapkan, seperti yang disebutkan di bawah ini.
2. Dapatkan melalui simpul induk:
(1) Parentobj.firstchild: Metode ini dapat digunakan jika simpul adalah anak pertama dari simpul yang diketahui (ParentObj). Properti ini dapat digunakan secara rekursif, yang berarti didukung
Parentobj.firstchild.firstchild.firstchild ..., sehingga Anda bisa mendapatkan node yang lebih dalam.
(2) Parentobj.LastChild: Jelas, properti ini adalah simpul anak terakhir dari simpul yang diketahui (ParentObj). Seperti FirstChild, dapat digunakan secara rekursif.
Dalam penggunaan, jika kita menggabungkan keduanya, kita akan mencapai efek yang lebih menarik, yaitu: parentobj.firstchild.lastchild.lastchild ...
(3) Parentobj.childnodes: Dapatkan array node anak dari node yang diketahui, dan kemudian Anda dapat menemukan node yang diperlukan melalui loop atau indeks.
CATATAN: Setelah pengujian, ditemukan bahwa array node anak langsung diperoleh pada IE7, sedangkan array node anak diperoleh di Firefox2.0.0.11 adalah semua node anak, yaitu, node anak termasuk node anak.
(4) Parentobj.Children: Dapatkan array node anak langsung dari node yang diketahui.
Catatan: Setelah pengujian, pada IE7, efeknya sama dengan anak -anak, tetapi Firefox 2.0.0.11 tidak mendukungnya. Ini juga mengapa saya ingin menggunakan gaya yang berbeda dari metode lain. Oleh karena itu, tidak disarankan untuk digunakan.
(5) ParentObj.getElementsByTagname (TagName): Metode penggunaan tidak akan diulang, ia mengembalikan serangkaian node anak dari node yang diketahui dengan nilai yang ditentukan di antara semua node anak dari node yang diketahui. Misalnya:
ParentObj.getElementsByTagname ('A') mengembalikan semua hyperlink dalam node anak yang diketahui.
3. Dapatkan melalui node yang berdekatan:
(1) tetangga. Properti ini tampaknya digunakan secara rekursif, seperti FirstChild dan LastChild di yang sebelumnya.
(2) tetangga.
4. Dapatkan melalui node anak:
(1) Childnode.parentnode: Dapatkan simpul induk dari simpul yang diketahui.
Metode yang disebutkan di atas hanyalah beberapa metode dasar. Jika Anda menggunakan pustaka JavaScript seperti prototipe, Anda juga dapat mendapatkan metode lain yang berbeda, seperti akuisisi kelas melalui node, dll. Namun, jika metode di atas dapat digunakan secara fleksibel, saya percaya bahwa sebagian besar prosedur harus dapat mengatasinya.