Melintasi DOM Tree: Mudah Berjalan Document Object Model

Traversal dari Document Object Model (DOM) pohon sering diperlukan utilitas oleh pengembang web. Proses ini sekarang cukup mudah. Belajar berjalan DOM!

A+ A-

Melintasi berbagai model data dan struktur data adalah kebutuhan yang sangat umum di bidang rekayasa perangkat lunak. programmer web juga sering perlu berurusan dengan Document Object Model (DOM) dari halaman web atau dari file XML. Berjalan pohon DOM dan memanipulasi DOM node adalah kesepakatan rutin untuk pengembang web. Oleh karena itu, sejak lama telah ada kebutuhan untuk sebuah metode yang sederhana dan mudah untuk mengakses node dalam DOM. Untungnya, sekarang ada cara yang sangat sederhana yang tersedia untuk traversal DOM.

Dengan W3C didefinisikan antarmuka TreeWalker -sekarang Anda dapat dengan cepat mengakses node yang diperlukan. Metode createTreeWalker () dapat membuat obyek dari TreeWalker. Mari kita lihat dengan contoh JavaScript:

 var walker = document.createTreeWalker (rootnode, NodeFilter.SHOW_TEXT, null, false) 

Kode di atas menciptakan sebuah pohon dengan akarnya sebagai rootnode ditentukan. Ini berarti Anda benar-benar bisa mendapatkan setiap sub-tree dalam DOM! Dan dalam kasus Anda tertarik untuk bekerja dengan seluruh DOM Anda bisa mendapatkan pohon lengkap dengan menggunakan elemen BODY sebagai root. elemen BODY mencakup semua elemen yang terlihat pada halaman web.

Peringatan (seperti biasa!): Sejauh yang saya tahu, IE 8 (atau lebih kecil) tidak mendukung metode ini. Firefox / Chrome / Opera lakukan mendukungnya. Mudah-mudahan IE 9 dan di atas akan memiliki dukungan untuk metode ini. Anda dapat check it out di browser Anda.

var rootnode = document.getElementById ( 'akar')
var walker = document.createTreeWalker (rootnode, NodeFilter.SHOW_TEXT, null, false) 

Bukankah itu sebuah keindahan ?! Pada baris pertama, Anda mendapatkan pegangan pada setiap elemen dengan ID dan kemudian memberikan elemen ini dengan metode createTreeWalker () untuk mendapatkan pohon DOM penuh di bawah elemen.

JavaScript indah!

JavaScript indah!

Apalagi?! Anda juga dapat menentukan TYPE node dalam sub-pohon Anda ingin bermain dengan. NodeFilter Antarmuka mendefinisikan 15 konstanta yang berbeda untuk membantu Anda dalam hal ini. Konstanta ini, Anda akan lebih sering menggunakan berikut:

NodeFilter.SHOW_ALL (untuk memilih semua node)
NodeFilter.SHOW_ELEMENT (untuk memilih hanya node teks)
NodeFilter.SHOW_ATTRIBUTE (untuk memilih hanya node atribut)
NodeFilter.SHOW_TEXT (untuk memilih hanya node elemen)

Berikut adalah contoh fungsi yang akan memberikan Anda akses ke semua node TEXT:

Fungsi domwalker (root) {
var rootnode = document.getElementById (root)
var walker = document.createTreeWalker (rootnode, NodeFilter.SHOW_TEXT, null, false)

sementara (walker.nextNode ()) {
// Lakukan sesuatu dengan node saat
}
}

Menggunakan sederhana sementara loop, Anda dapat berjalan melalui semua node hadir dalam DOM sub-pohon. Dalam contoh di atas, sub-pohon dengan hanya node teks dikembalikan.

Melintasi DOM sering dilakukan ketika mengembangkan aplikasi web dengan JavaScript, Perl, Python dll Misalnya, hari lain ketika aku harus mengacak daftar HTML , saya harus ambil semua node LI dan kemudian mengacak mereka. Meskipun, dalam hal ini digunakan metode lain untuk mengakses node.

Saya berharap metode ini akan membantu Anda dalam menulis kode yang lebih baik dan lebih mudah.