penyataan! ! , artikel ini merupakan cetakan ulang dari artikel orang lain, karena kebetulan pernah digunakan dan dirasa sangat praktis, jadi saya mengambilnya untuk digunakan di kemudian hari! !
Terima kasih kepada penulis aslinya! ! ! ,
Dalam pengembangan aplikasi Web, khususnya program Web 2.0, seringkali diperlukan untuk mendapatkan elemen di halaman dan kemudian memperbarui gaya, konten, dll dari elemen tersebut. Cara mendapatkan elemen yang akan diperbarui adalah masalah pertama yang harus dipecahkan. Untungnya, ada banyak cara untuk mendapatkan node menggunakan JavaScript. Berikut ringkasan singkatnya (metode berikut telah diuji di IE7 dan Firefox2.0.0.11):
1. Dapatkan melalui node dokumen tingkat atas:
(1) document.getElementById(elementId): Metode ini dapat memperoleh elemen yang diperlukan secara akurat melalui ID node. Jika halaman berisi beberapa node dengan ID yang sama, hanya node pertama yang akan dikembalikan.
Saat ini sudah banyak pustaka JavaScript seperti prototype dan Mootools yang menyediakan metode yang lebih sederhana: $(id), dan parameternya tetap berupa 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 berdasarkan namanya. Seperti dapat dilihat dari namanya, metode ini tidak mengembalikan elemen node, tetapi array node dengan nama yang sama. Kemudian, kita dapat mengulang atribut tertentu dari node tersebut untuk menentukan apakah itu adalah node yang diperlukan.
Misalnya: Dalam HTML, kotak centang dan radio keduanya menggunakan nilai atribut nama yang sama untuk mengidentifikasi elemen dalam grup. Jika kita ingin mendapatkan elemen yang dipilih sekarang, pertama-tama kita ambil elemen yang diacak, lalu lakukan loop untuk menentukan apakah nilai atribut yang diperiksa dari node tersebut benar.
(3) document.getElementsByTagName(tagName): Metode ini memperoleh node melalui Tag-nya. Metode ini juga mengembalikan array. Misalnya: document.getElementsByTagName('A') akan mengembalikan semua node hyperlink pada halaman. Sebelum memperoleh node, jenis node secara umum telah diketahui, sehingga penggunaan metode ini relatif mudah. Namun kerugiannya juga jelas, yaitu array yang dikembalikan mungkin berukuran sangat besar, sehingga akan membuang banyak waktu. Jadi, apakah cara ini tidak ada gunanya? Tentu saja tidak. Metode ini berbeda dari dua metode di atas. Ini bukan metode kepemilikan node dokumen dan juga dapat diterapkan pada node lain, yang akan disebutkan di bawah.
2. Dapatkan melalui node induk:
(1) parentObj.firstChild: Metode ini dapat digunakan jika node tersebut merupakan node anak pertama dari node yang dikenal (parentObj). Atribut ini dapat digunakan secara rekursif, yaitu mendukung bentuk parentObj.firstChild.firstChild.firstChild..., sehingga dapat diperoleh node yang lebih dalam.
(2) parentObj.lastChild: Jelas, atribut ini untuk mendapatkan node anak terakhir dari node yang diketahui (parentObj). Seperti firstChild, ini juga dapat digunakan secara rekursif.
Dalam penggunaannya, jika kita menggabungkan keduanya, kita akan mendapatkan hasil yang lebih menarik, yaitu: parentObj.firstChild.lastChild.lastChild...
(3) parentObj.childNodes: Dapatkan larik simpul anak dari simpul yang dikenal, lalu temukan simpul yang diperlukan melalui perulangan atau pengindeksan.
Catatan: Setelah dilakukan pengujian, diketahui bahwa pada IE7 yang didapat adalah array node anak langsung, sedangkan pada Firefox 2.0.0.11 yang didapat adalah semua node anak, termasuk node anak dari node anak tersebut.
(4) parentObj.children: Dapatkan array simpul anak langsung dari simpul yang dikenal.
Catatan: Setelah pengujian, di IE7, efeknya sama dengan childNodes, tetapi Firefox2.0.0.11 tidak mendukungnya. Inilah mengapa saya menggunakan gaya yang berbeda dari metode lainnya. Oleh karena itu penggunaannya tidak dianjurkan.
(5) parentObj.getElementsByTagName(tagName): Metode penggunaan tidak akan dijelaskan secara detail. Metode ini mengembalikan array node anak dengan nilai yang ditentukan di antara semua node anak dari node yang dikenal. Misalnya: parentObj.getElementsByTagName('A') mengembalikan semua hyperlink di node anak yang dikenal.
3. Dapatkan dari node yang berdekatan:
(1) neighbourNode.previousSibling: Dapatkan node sebelumnya dari node yang dikenal (neighbourNode). Atribut ini sepertinya digunakan secara rekursif seperti firstChild dan lastChild.
(2) neighbourNode.nextSibling: Dapatkan node berikutnya dari node yang dikenal (neighbourNode), juga mendukung rekursi.
4. Dapatkan melalui node anak:
(1) childNode.parentNode: Dapatkan simpul induk dari simpul yang dikenal.
Metode yang disebutkan di atas hanyalah beberapa metode dasar. Jika Anda menggunakan pustaka JavaScript seperti Prototipe, Anda juga bisa mendapatkan metode lain yang berbeda, seperti memperoleh melalui kelas node, dll. Namun, jika Anda bisa secara fleksibel menggunakan berbagai cara di atas, saya yakin Anda seharusnya bisa menangani sebagian besar program.
Perhatikan bahwa ini adalah dokumen yang direproduksi: tidak disarankan untuk mendapatkan Node HTML melalui firstChild dan lastChild. Karena, bergantung pada browsernya, firstChild dapat mengembalikan objek atribut parentObj.