Praktik terbaik manipulasi javascript dom

Bekerja dengan DOM adalah salah satu tugas JavaScript sisi klien yang paling umum. Ini juga merupakan sumber utama masalah (dan ketenaran JavaScript), karena metode DOM diimplementasikan secara berbeda di browser yang berbeda. Itulah mengapa menggunakan perpustakaan JavaScript yang bagus yang menyembunyikan perbedaan antar browser dapat mempercepat pengembangan secara signifikan

Kami akan mempertimbangkan beberapa pola yang direkomendasikan untuk mengakses dan memodifikasi DOM, yang berfokus pada performa tinggi

Mengakses pohon DOM

Mengakses pohon DOM adalah operasi yang cukup mahal;

Ini karena pohon DOM biasanya diimplementasikan secara terpisah dari mesin JavaScript. Dari sudut pandang browser, ini masuk akal, karena aplikasi JavaScript mungkin tidak perlu mengakses pohon DOM sama sekali. Dan selain itu, bahasa pemrograman lain selain JavaScript dapat digunakan untuk bekerja dengan pohon DOM (misalnya, VBScript di IE)

Oleh karena itu, Anda harus berusaha untuk meminimalkan operasi mengakses pohon DOM. Itu artinya

• Panggilan ke elemen DOM di dalam loop harus dihindari
• Dianjurkan untuk menetapkan referensi ke elemen DOM ke variabel lokal dan bekerja dengan variabel ini
• Gunakan antarmuka pemilih jika memungkinkan
• Nilai properti panjang harus disimpan dalam variabel lokal saat melakukan iterasi melalui koleksi HTML

Lihatlah contoh berikut, di mana siklus kedua, meskipun ukurannya lebih besar, puluhan, atau bahkan ratusan kali lebih cepat dari yang pertama, tergantung pada browser

              
                // anti-pattern
                for (var i = 0; i < 100; i + = 1) {
                � document.getElementById("content").innerHTML+=i + ",";
                }

                // preferable - changes the value of a local variable
                var i, content = "";
                for (i = 0; i <100; i + = 1) {
                � content + = i + ",";
                }
                document.getElementById("output").innerHTML+=content;
              
            

Dalam cuplikan berikut, contoh kedua (menggunakan variabel lokal) lebih disukai, meskipun berisi satu baris kode program lagi dan menggunakan variabel tambahan

              
                // anti-pattern
                var padding = document.getElementById("content").style.padding,
                   margin = document.getElementById("content").style.margin;

                // preferred
                var style = document.getElementById("content").style,
                � padding = style.padding,
                � margin = style.margin;
              
            

Menggunakan antarmuka pemilih berarti penggunaan metode

              
                document.querySelector("span .selected");
                document.querySelectorAll("#container div.first");
              
            

Metode ini mengambil pemilih CSS dan mengembalikan daftar simpul DOM yang cocok dengan kriteria pemilihan yang ditentukan. Metode pemilih tersedia di browser modern dan selalu bekerja lebih cepat daripada implementasi pemilihan node lainnya berdasarkan penggunaan metode DOM lainnya

Versi terbaru perpustakaan JavaScript populer memanfaatkan antarmuka pemilih, jadi pastikan untuk menggunakan versi terbaru perpustakaan favorit Anda

Selain itu, tambahkan atribut id = ""_ ke elemen yang paling sering Anda akses, karena ini akan memberikan kemampuan untuk menemukannya dengan mudah dan cepat menggunakan metode document.getElementById(myid)

manipulasi pohon DOM

Selain mengakses elemen DOM, Anda sering perlu memodifikasi, menghapus, atau menambahkan elemen baru. Membuat perubahan pada pohon DOM dapat menyebabkan browser menggambar ulang halaman, serta mendistribusikan ulang elemen (menghitung ulang koordinat dan ukurannya), yang bisa menjadi operasi yang sangat mahal

Di sini sekali lagi, prinsip dasarnya adalah mencoba meminimalkan jumlah operasi yang mengubah pohon DOM, yang berarti mengakumulasi perubahan dengan mengeksekusinya di luar pohon "langsung" dokumen DOM

Jika Anda perlu membuat cabang pohon yang relatif besar, Anda harus mencoba untuk tidak menambahkannya ke pohon sampai benar-benar siap. Untuk tujuan ini, Anda dapat membuat fragmen dokumen yang berisi node yang Anda perlukan

Contoh berikut menunjukkan bagaimana node tidak boleh ditambahkan

              
                // anti-pattern
                // nodes are added to the tree as they are created

                var p, t;
                p = document.createElement("p");
                t = document.createTextNode("example text");
                p.appendChild(t);

                document.body.appendChild(p);

                p = document.createElement("p");
                t = document.createTextNode("another example text");
                p.appendChild(t);

                document.body.appendChild(p);
              
            

Jauh lebih disukai untuk membuat fragmen dokumen, mengubahnya dalam "mode offline" dan menambahkannya ke pohon DOM ketika sudah benar-benar siap

Saat ditambahkan ke pohon DOM, konten fragmen akan ditambahkan, bukan fragmen itu sendiri. Dan itu sangat nyaman. Jadi, sebuah fragmen dokumen adalah cara yang bagus untuk membungkus banyak node, meskipun node tersebut tidak berada di dalam elemen induk umum

Berikut ini adalah contoh penggunaan fragmen dokumen

              
                var p, t, fragmnt;
                fragmnt = document.createDocumentFragment();

                p = document.createElement("p");
                t = document.createTextNode("some text");

                p.appendChild(t);
                fragmnt.appendChild(p);

                p = document.createElement("p");
                t = document.createTextNode("another text");

                p.appendChild(t);
                fragmnt.appendChild(p);

                document.body.appendChild(fragmnt);
              
            

Dalam contoh ini, dokumen diubah hanya sekali, menyebabkan operasi redraw satu halaman, sedangkan contoh anti-templat sebelumnya menyebabkan halaman digambar ulang saat setiap paragraf ditambahkan

Fragmen dokumen mudah digunakan saat menambahkan node baru ke pohon. Namun, saat mengubah simpul pohon yang ada, Anda juga harus berusaha meminimalkan jumlah perubahan. Untuk melakukan ini, Anda dapat membuat salinan dari cabang pohon yang diperlukan, membuat perubahan yang diperlukan pada salinan dan, jika sudah siap, ganti yang asli dengan itu.

Bagaimana cara memanipulasi DOM menggunakan JavaScript?

Apa itu DOM dan bagaimana cara memanipulasinya dari JavaScript?

Bagaimana Anda memanipulasi elemen DOM?

Apa metode manipulasi DOM?