penjelajahan DOM
Mencari elemen berdasarkan ID, tipe elemen, dan nama kelas memang sangat berguna, namun bagaimana jika Anda ingin mencari elemen berdasarkan posisinya di pohon DOM? Dengan kata lain, Anda memiliki elemen tertentu dan Anda ingin mencari induknya, salah satu turunannya, dan saudara simpul sebelumnya atau berikutnya. Misalnya, ambil kode HTML terpisah berikut:
Listing 1: Fragmen HTML (tabel)
<tabel>
<kepala>
<tr>
<th>Nama</th>
<th>Alamat Email</th>
<th>Tindakan</th>
</tr>
</kepala>
<tubuh>
<tr id="baris-001">
<td>Joe Lennon</td>
<td>[email protected]</td>
<td><a href="#">Edit</a>
<a href="#">Hapus</a></td>
</tr>
<tr id="baris-002">
<td>Jill Mac Sweeney</td>
<td>[email protected]</td>
<td><a href="#">Edit</a>
<a href="#">Hapus</a></td>
</tr>
</tbody>
</tabel>
Listing 1 menggunakan indentasi untuk menunjukkan lokasi setiap node elemen di pohon DOM. Dalam contoh ini, elemen tabel adalah elemen root dan memiliki dua node anak, thead dan tbody. Elemen thead memiliki simpul anak tr, dan tr memiliki tiga anak - semuanya elemen ke-th. Elemen tbody memiliki dua node anak tr, dan setiap node tr memiliki tiga anak. Node ketiga di setiap baris di atas selanjutnya berisi node anak, keduanya merupakan dua tag tautan.
Seperti yang Anda ketahui, Anda dapat dengan mudah memilih elemen berdasarkan ID menggunakan fungsi pilih kerangka JavaScript . Pada contoh ini, terdapat dua elemen dengan ID, yaitu elemen tr dengan ID baris-001 dan baris-002. Untuk memilih tr pertama menggunakan pustaka Prototipe, Anda dapat menggunakan kode berikut:
var theRow = $('baris-001');
Di bab sebelumnya, Anda juga mempelajari tentang penggunaan selector untuk mengambil elemen berdasarkan tipe atau kelasnya. Dalam contoh ini, Anda dapat menggunakan sintaks berikut untuk mendapatkan semua elemen td.
var allCells = $$('td');
Masalah utama dalam mengubah kode adalah ia mengembalikan setiap elemen td. Tetapi bagaimana jika Anda hanya ingin mendapatkan semua elemen td dari tr dengan ID baris-001? Di sinilah fungsi traversal DOM berperan. Pertama, mari kita gunakan prototipe untuk memilih semua turunan tr dengan baris ID-001.
var firstRowCells = theRow.childElements();
Ini akan mengembalikan array dari semua elemen anak dari variabel theRow (tr yang awalnya Anda atur dengan ID baris-001).
Selanjutnya, asumsikan Anda hanya ingin mendapatkan elemen anak pertama dari baris tersebut. Dalam hal ini adalah elemen td yang berisi teks "Joe Lennon". Untuk melakukannya, gunakan pernyataan berikut:
var firstRowFirstCell = theRow.down();
Sangat sederhana! Penggunaan khusus ini setara dengan:
var firstRowFirstCell = theRow.childElements()[0];
Bisa juga diungkapkan seperti ini:
var firstRowFirstCell = theRow.down(0);
Indeks JavaScript dimulai dari nol, jadi pernyataan di atas pada dasarnya memberitahu JavaScript untuk memilih elemen anak pertama. Untuk memilih elemen anak kedua (sel yang berisi alamat email [email protected] ), Anda akan menggunakan:
var firstRowSecondCell = theRow.down(1);
Alternatifnya, Anda dapat menelusuri DOM antar node saudara. Dalam contoh ini, sel kedua adalah saudara berikutnya dari sel pertama. Oleh karena itu, Anda dapat menggunakan pernyataan berikut:
var firstRowSecondCell = firstRowFirstCell.next();
Sama seperti fungsi down() yang berfungsi, memilih sel ketiga dapat digunakan seperti ini.
var firstRowThirdCell = firstRowFirstCell.next(1);
Selain menggunakan indeks untuk menemukan node tertentu, pustaka Prototipe juga dapat menggunakan sintaks pemilih CSS. Di Listing 1, kami mencari tautan kedua (tautan "hapus") yang berisi detail Jill Mac Sweeney.
var secondRowSecondLink = $('baris-002').down('a', 1);
Dalam contoh ini, gunakan fungsi $ untuk menemukan baris dengan baris ID-002, melintasi turun ke elemen a turunan kedua (jangkar).
Beberapa kerangka kerja juga mengizinkan fungsionalitas traversal "daisy-chaining", yang berarti Anda dapat menghubungkan perintah traversal satu sama lain. Dalam contoh di atas, ekspresi lain dari pustaka Prototipe adalah sebagai berikut:
var secondRowSecondLink = $('baris-002').down('a').next();
Lihatlah contoh berikut:
var domTraversal = $('baris-001').down().up().next().previous();
Seperti yang Anda lihat, rantai daisy memungkinkan Anda menghubungkan beberapa pernyataan traversal DOM. Faktanya, contoh di atas sebenarnya memilih elemen tr dengan baris ID-001, sehingga rantai daisy kembali ke awal.
Alamat cetak ulang: http://www.denisdeng.com/?p=708
Alamat asli: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html