Dokumen ini membahas manipulasi DOM dalam pengembangan web menggunakan JavaScript, dengan fokus pada cara-cara untuk meminimalkan reflow browser melalui berbagai teknik. Terdapat empat pola utama yang diuraikan: penggantian CSS berdasarkan nama kelas, manipulasi DOM out-of-the-flow, pembuatan elemen DOM tunggal, dan penggunaan document fragment. Contoh implementasi dan solusi disediakan untuk masing-masing pola, menunjukkan bagaimana cara mengoptimalkan pengubahan elemen di halaman web.

1. Javascript -
Manipulasi DOM
Pengembangan Web
Edwin Lunando
edwin@kuliahkita.com

2. Pendahuluan
Seperti yang dijelaskan pada materi sebelumnya,
javascript dapat mengatur document object yang
merupakan bagian dari halaman yang sedang ditampilkan.
Ketika memanipulasi DOM, kita bukan berarti hanya
mengubah elemen yang sudah ada dalam halaman situs,
tetapi juga menambah ataupun mengurangi suatu elemen.

3. Pendahuluan
Biasa manipluasi document object ini digunakan pada
front-end untuk mengubah cara menampilkan (style) dari
suatu elemen pada situs.
Manipulasi DOM dapat menyebabkan browser reflow atau
proses browser menentukan kembali bagaimana elemen
dalam halaman situs harus ditampilkan.
Reflow dapat disebabkan oleh: pengubahan style dan
resize ukuran browser.

4. Operasi Manipulasi DOM
Berikut ini adalah 4 pola yang melingkupi manipulasi DOM dan
pembuatan DOM (DOM generation) yang baik dan mengurangi
reflow browser:
1. Manipulasi penggantian CSS dari nama kelas
2. Manipulasi DOM out-of-the-flow
3. Pembuatan elemen DOM tunggal
4. Pembuatan DocumentFragment DOM

5. Manipulasi Penggantian CSS dengan Nama Kelas
Masalah: Penggantian elemen secara iteratif
tidak baik karena membuat reflow browser
berulang.
Contoh: (mengubah anchor text)
Javascript
function editAnchor(element) {
element.style.fontweight = ‘bold’;
element.style.textDecoration = ‘none’;
element.style.color = ‘blue’;
}
Solusi: Buat sebuah kelas yang mengandung
properti yang akan diubah dan gunakan
javascript untuk mengganti nama kelas
Contoh:
Javascript
function editAnchor(element){
element.className = ‘edited-anchor’;
}
CSS
.edited-anchor{
element.style.fontweight = ‘bold’;
element.style.textDecoration = ‘none’;
element.style.color = ‘blue’;
}

6. Manipulasi DOM Out-of-the-flow
Masalah: Pengubahan atribut nama kelas semua elemen anak dalam elemen induk memicu reflow
berulang untuk tiap elemen anak
Contoh: mengubah nama kelas anchor text
Javascript
function updateAnchor(element, anchorClass) {
var anchors =
element.getElementsByTagName(‘a’);
for (var i=0, i<anchors.length; i++) {
anchors[i].className = anchorClass;
}
}

7. Manipulasi DOM Out-of-the-flow
Solusi: Buang semua elemen anak dalam elemen induk, update elemen anak, dan tambahkan
kembali ke elemen induk
Buat Fungsi Javascript
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element,
nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
Sisipkan ke Fungsi Javascript Sebelumnya
function updateAnchor(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName(‘a’);
for (var i=0, i<anchors.length; i++) {
anchors[i].className = anchorClass;
}
insertFunction();
}

8. Pembuatan Elemen DOM Tunggal
Pembuatan dan penambahan elemen untuk satu kali reflow dengan cara mengubah semua elemen
yang ingin ditambah terlebih dahulu sebelum disisipkan ke DOM.
Masalah: Menambah elemen anak ke elemen
induk dan menambahkan properti pada elemen
Contoh: menambahkan anchor text
function addAnchor(parentElement, anchorText,
anchorClass) {
var element = document.createElement('a');
parentElement.appendChild(element);
element.innerHTML = anchorText;
element.className = anchorClass;
}
Solusi: Sisipkan elemen yang sudah dibuat dan
diupdate pada bagian terakhir
Contoh:
function addAnchor(parentElement, anchorText,
anchorClass) {
var element = document.createElement('a');
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);
}

9. Pembuatan Document Fragment DOM
Metode ini membantu kita membuat banyak elemen dan
menyisipkannya ke DOM dengan memicu satu kali reflow dengan
menggunakan Document Fragment.
Document Fragment ini berada di luar DOM sehingga termasuk out-of-the-
flow. Metode ini mirip dengan metode sebelumnya.

10. Pembuatan Document Fragment DOM
Masalah: reflow yang berulang sebanyak proses
Contoh: penyisipan 10 elemen anchor pada
element
function addAnchors(element) {
var anchor;
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
element.appendChild(anchor);
}
}
Solusi: Buat Document Fragment dan sisipkan
Contoh: penyisipan 10 elemen anchor pada
element dengan Document Fragment
function addAnchors(element) {
var anchor, fragment =
document.createDocumentFragment();
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
fragment.appendChild(anchor);
}
element.appendChild(fragment);
}