XML Matters: Beyond the DOM (Tips dan Trik Menggunakan DOM dengan Mudah)

Utilitas ini dapat menghemat banyak waktu ketika Anda ingin dengan cepat membuat objek DHTML kompleks dalam jumlah besar. Pola di sini berarti jika Anda memiliki struktur DOM tertentu yang perlu sering dibuat, gunakan utilitas untuk membuatnya. Hal ini tidak hanya mengurangi jumlah kode yang Anda tulis, tetapi juga mengurangi pemotongan dan penempelan kode yang berulang-ulang (penyebab kesalahan) dan mempermudah berpikir jernih saat membaca kode.

Apa selanjutnya?
DOM sering kali kesulitan memberi tahu Anda node berikutnya dalam urutan dokumen. Berikut adalah beberapa utilitas untuk membantu Anda bergerak maju dan mundur antar node:

Listing 8. nextNode dan prevNode
// mengembalikan node berikutnya dalam urutan dokumen
fungsi simpul berikutnya(simpul) {
jika (!simpul) mengembalikan nol;
if (node.firstChild){
kembalikan node.firstChild;
} kalau tidak {
kembali nextWide(simpul);
}
}
// fungsi pembantu untuk nextNode()
fungsi nextWide(simpul) {
jika (!simpul) mengembalikan nol;
if (node.saudara berikutnya) {
kembalikan node.nextSibling;
} kalau tidak {
return nextWide(node.parentNode);
}
}
// mengembalikan node sebelumnya dalam urutan dokumen
fungsi prevNode(simpul) {
jika (!simpul) mengembalikan nol;
if (node.previousSibling) {
kembalikan previousDeep(node.previousSibling);
}
return node.parentNode;
}
// fungsi pembantu untuk prevNode()
fungsi sebelumnyaDeep(simpul) {
jika (!simpul) mengembalikan nol;
while (node.childNodes.length) {
simpul = simpul.Anak terakhir;
}
simpul kembali;
}

Gunakan DOM dengan mudah
Terkadang Anda mungkin ingin melakukan iterasi melalui DOM, memanggil fungsi pada setiap node atau mengembalikan nilai dari setiap node. Faktanya, karena ide-ide ini sangat umum, DOM Level 2 sudah menyertakan ekstensi yang disebut DOM Traversal dan Range (yang mendefinisikan objek dan API untuk mengulangi semua node di DOM), yang digunakan untuk menerapkan Fungsi dan memilih rentang di DOM . Karena fungsi ini belum ditentukan di Internet Explorer (setidaknya belum), Anda dapat menggunakan nextNode() untuk melakukan hal serupa.

Di sini, idenya adalah membuat beberapa alat sederhana dan umum, lalu merakitnya dengan cara berbeda untuk mencapai efek yang diinginkan. Jika Anda terbiasa dengan pemrograman fungsional, ini akan terasa familier. Pustaka Beyond JS (lihat Sumberdaya) mengedepankan gagasan ini.

Listing 9. Utilitas DOM fungsional
// mengembalikan Array dari semua node, dimulai dari startNode dan
// melanjutkan sisa pohon DOM
fungsi listNodes(startNode) {
var daftar = Array baru();
var simpul = startNode;
sementara(simpul) {
daftar.push(simpul);
simpul = simpul berikutnya(simpul);
}
daftar pengembalian;
}
// Sama seperti listNodes(), namun bekerja mundur dari startNode.
// Perhatikan bahwa ini tidak sama dengan menjalankan listNodes() dan
// membalik daftar.
fungsi listNodesReversed(startNode) {
var daftar = Array baru();
var simpul = startNode;
sementara(simpul) {
daftar.push(simpul);
simpul = sebelumnyaNode(simpul);
}
daftar pengembalian;
}
// terapkan fungsi ke setiap node di nodeList, kembalikan daftar hasil baru
peta fungsi(daftar, fungsi) {
var result_list = Array baru();
for (var i = 0; i < daftar.panjang; i++) {
result_list.push(func(daftar[i]));
}
kembalikan hasil_daftar;
}
// terapkan pengujian pada setiap node, kembalikan daftar node baru yang mana
// tes(simpul) menghasilkan nilai benar
filter fungsi(daftar, pengujian) {
var result_list = Array baru();
for (var i = 0; i < daftar.panjang; i++) {
if (tes(daftar[i])) hasil_daftar.push(daftar[i]);
}
kembalikan hasil_daftar;
}

Listing 9 berisi empat alat dasar. Fungsi listNodes() dan listNodesReversed() dapat diperluas ke panjang opsional, mirip dengan metode array's slice(). Saya biarkan ini sebagai latihan untuk Anda. Hal lain yang perlu diperhatikan adalah fungsi map() dan filter() sepenuhnya umum dan dapat digunakan untuk bekerja dengan daftar apa pun (bukan hanya daftar node). Sekarang saya tunjukkan beberapa cara menggabungkannya.

Listing 10. Menggunakan utilitas fungsional
// Daftar semua nama elemen dalam urutan dokumen
fungsi isElement(simpul) {
return node.nodeType == Node.ELEMENT_NODE;
}
fungsi nama simpul(simpul) {
kembalikan node.nodeName;
}
var elementNames = peta(filter(listNodes(dokumen),isElement), nodeName);
// Semua teks dari dokumen (abaikan CDATA)
fungsi isText(simpul) {
return node.nodeType == Node.TEXT_NODE;
}
fungsi nilai simpul(simpul) {
kembalikan node.nodeValue;
}
var allText = peta(filter(listNodes(dokumen), isText), nodeValue);

Anda dapat menggunakan utilitas ini untuk mengekstrak ID, mengubah gaya, menemukan node tertentu dan menghapusnya, dan banyak lagi. Setelah DOM Traversal dan Range API diimplementasikan secara luas, Anda dapat menggunakannya untuk memodifikasi pohon DOM tanpa terlebih dahulu membuat daftarnya. Tidak hanya kuat, tetapi cara kerjanya juga mirip dengan yang saya soroti di atas.

Zona bahaya DOM
Perhatikan bahwa API DOM inti tidak memungkinkan Anda mengurai data XML menjadi DOM, atau membuat serial DOM menjadi XML. Fungsi-fungsi ini didefinisikan dalam ekstensi DOM Level 3 "Muat dan Simpan", namun belum sepenuhnya diterapkan, jadi jangan memikirkannya sekarang. Setiap platform (browser atau aplikasi DOM profesional lainnya) memiliki metodenya sendiri untuk mengkonversi antara DOM dan XML, namun konversi lintas platform berada di luar cakupan artikel ini.

DOM bukanlah alat yang sangat aman - terutama ketika menggunakan DOM API untuk membuat pohon yang tidak dapat diserialkan sebagai XML. Jangan pernah mencampur API non-namespace DOM1 dan API yang mendukung namespace DOM2 (misalnya, createElement dan createElementNS) dalam program yang sama. Jika Anda menggunakan namespace, cobalah untuk mendeklarasikan semua namespace pada posisi elemen root dan jangan menimpa awalan namespace, jika tidak maka segalanya akan menjadi sangat membingungkan. Secara umum, selama Anda mengikuti rutinitas, Anda tidak akan memicu situasi kritis yang dapat membuat Anda mendapat masalah.

Jika Anda telah menggunakan innerText dan innerHTML Internet Explorer untuk penguraian, Anda dapat mencoba menggunakan fungsi elem(). Dengan membangun utilitas serupa, Anda mendapatkan lebih banyak kemudahan dan mewarisi manfaat kode lintas platform. Mencampur kedua metode ini sangat buruk.

Beberapa karakter Unicode tidak disertakan dalam XML. Implementasi DOM memungkinkan Anda untuk menambahkannya, tetapi konsekuensinya adalah tidak dapat diserialkan. Karakter ini mencakup sebagian besar karakter kontrol dan karakter individual dalam pasangan pengganti Unicode. Ini hanya terjadi jika Anda mencoba memasukkan data biner ke dalam dokumen, tetapi itu adalah situasi yang sulit.

Kesimpulan
Saya telah membahas banyak hal yang dapat dilakukan DOM, namun masih banyak lagi yang dapat dilakukan oleh DOM (dan JavaScript). Pelajari dan jelajahi contoh-contoh ini untuk melihat bagaimana contoh-contoh tersebut dapat digunakan untuk memecahkan masalah yang mungkin memerlukan skrip klien, templat, atau API khusus.

DOM memiliki keterbatasan dan kekurangan, tetapi juga memiliki banyak kelebihan: DOM dibangun di banyak aplikasi; cara kerjanya sama baik Anda menggunakan teknologi Java, Python, atau JavaScript; sangat mudah menggunakan SAX; yang sederhana dan kuat untuk digunakan. Semakin banyak aplikasi yang mulai mendukung DOM, termasuk aplikasi berbasis Mozilla, OpenOffice, dan XMetaL Blast Radius. Semakin banyak spesifikasi yang memerlukan DOM dan memperluasnya (misalnya SVG), sehingga DOM selalu ada di sekitar Anda. Anda sebaiknya menggunakan alat yang banyak digunakan ini.