14 Kunci Jawaban DOM

Kunci jawaban 14 Latihan DOM.

14.1 Membangun Tabel

function buatTabel(data) {
  let tabel = document.createElement("table");
  let kolom = Object.keys(data[0]);
 
  let barisHeader = document.createElement("tr");
  for (let nama of kolom) {
    let th = document.createElement("th");
    th.textContent = nama;
    barisHeader.appendChild(th);
  }
  tabel.appendChild(barisHeader);
 
  for (let objek of data) {
    let baris = document.createElement("tr");
    for (let nama of kolom) {
      let td = document.createElement("td");
      td.textContent = objek[nama];
      baris.appendChild(td);
    }
    tabel.appendChild(baris);
  }
  return tabel;
}
 
document.body.appendChild(buatTabel([
  {nama: "Kucing", kaki: 4},
  {nama: "Ayam", kaki: 2}
]));

Kenapa: Object.keys(data[0]) memberi urutan kolom. Satu loop bikin baris header (th), satu loop lagi bikin satu baris (tr) per objek dengan sel td. Semua dirangkai dengan appendChild, lalu tabelnya ditempel ke halaman. textContent aman untuk mengisi teks (gak menafsirkan HTML).

→ Soal: 14 Latihan DOM > 14.1 Membangun Tabel

14.2 Elemen berdasarkan Nama Tag

function byTagName(node, tagName) {
  let hasil = [];
  tagName = tagName.toLowerCase();
  function jelajah(n) {
    for (let anak of n.childNodes) {
      if (anak.nodeType == Node.ELEMENT_NODE) {
        if (anak.nodeName.toLowerCase() == tagName) {
          hasil.push(anak);
        }
        jelajah(anak);
      }
    }
  }
  jelajah(node);
  return hasil;
}

Kenapa: rekursif menuruni pohon. Fungsi dalam jelajah memeriksa tiap anak: kalau elemen dan namanya cocok, masukkan ke hasil, lalu turun ke anak-anaknya. Cek nodeType == Node.ELEMENT_NODE supaya node teks/komentar dilewati. nodeName dibandingkan dalam huruf kecil biar gak peka besar-kecil.

→ Soal: 14 Latihan DOM > 14.2 Elemen berdasarkan Nama Tag

14.3 Topi Kucing

let cat = document.querySelector("#cat");
let hat = document.querySelector("#hat");
let angle = 0, lastTime = null;
 
function animate(time) {
  if (lastTime != null) {
    angle += (time - lastTime) * 0.001;
  }
  lastTime = time;
  cat.style.top = (Math.sin(angle) * 40 + 100) + "px";
  cat.style.left = (Math.cos(angle) * 200 + 230) + "px";
  hat.style.top = (Math.sin(angle + Math.PI) * 40 + 100) + "px";
  hat.style.left = (Math.cos(angle + Math.PI) * 200 + 230) + "px";
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Kenapa: angle naik seiring selisih waktu (time - lastTime), bukan langkah tetap, supaya kecepatannya stabil walau frame telat. Kucing di titik lingkaran (cos, sin) dikali jari-jari (200 dan 40) plus geser tengah. Topi memakai angle + Math.PI — setengah putaran, jadi selalu di sisi berlawanan kucing.

→ Soal: 14 Latihan DOM > 14.3 Topi Kucing