14 Latihan DOM

Latihan buat 14 Document Object Model. Butuh DOM sungguhan — jalankan di playground iframe atau di halaman HTML. Konsep: membuat/menyusun node, navigasi rekursif, dan animasi. Jawaban di 14 Kunci Jawaban DOM.

14.1 Membangun Tabel

Dari array objek data, bangun tabel HTML secara terprogram: baris pertama header berisi nama kolom, baris berikutnya isinya. Sisipkan ke dokumen.

Contoh data:

let data = [
  {nama: "Kucing", kaki: 4},
  {nama: "Ayam", kaki: 2}
];

Petunjuk: pakai document.createElement untuk table, tr, th (header), td (data). Ambil nama kolom dengan Object.keys(data[0]). Loop bikin baris header dulu, lalu satu tr per objek data. Rangkai dengan appendChild, lalu tempel tabelnya ke document.body. Konsep di 14 Document Object Model > Membuat Node.

→ Jawaban: 14 Kunci Jawaban DOM > 14.1 Membangun Tabel

14.2 Elemen berdasarkan Nama Tag

Tulis sendiri fungsi byTagName(node, tagName) yang mengembalikan array semua elemen keturunan node dengan nama tag itu (mirip getElementsByTagName, tapi buatan sendiri).

Kode awal:

function byTagName(node, tagName) {
  // tulis kodemu di sini
}
 
console.log(byTagName(document.body, "h1").length);

Petunjuk: rekursif. Untuk tiap node, kalau ia elemen dan node.nodeName.toLowerCase() sama dengan tagName, masukkan ke hasil; lalu turun ke tiap anak di childNodes dan gabungkan. nodeName elemen adalah nama tag dalam huruf besar. Konsep di 14 Document Object Model > Navigasi Antar Node.

→ Jawaban: 14 Kunci Jawaban DOM > 14.2 Elemen berdasarkan Nama Tag

14.3 Topi Kucing

Animasikan gambar topi supaya mengorbit gambar kucing (kucing juga bergerak melingkar, topi di sisi berlawanan).

Kode awal (HTML):

<img src="cat.png" id="cat" style="position: absolute">
<img src="hat.png" id="hat" style="position: absolute">

Petunjuk: pakai requestAnimationFrame, hitung posisi dari satu sudut yang naik seiring waktu. Kucing di (sin(a), cos(a)) dikali jari-jari; topi di sudut a + Math.PI (berlawanan). Update kedua style.top/style.left di satu callback. Konsep di 14 Document Object Model > Positioning dan Animasi.

→ Jawaban: 14 Kunci Jawaban DOM > 14.3 Topi Kucing