DOM: Intermediate

// নতুন element বানানো
const li = document.createElement("li");
li.textContent = "বাংলাদেশ";

// parent-এ যোগ
const ul = document.querySelector("ul");
ul.appendChild(li);       // শেষে
// ul.append(li);          // আধুনিক একাধিক-যোগ
// ul.prepend(li);         // শুরুতে

const old = document.querySelector(".old");
old.remove();       // মুছে দেয়


const banner = document.querySelector(".banner");
banner.replaceWith("নতুন টেক্সট");

// removeChild — parent থেকে
const parent = document.querySelector("ul");
if (parent.firstElementChild) {
  parent.removeChild(parent.firstElementChild);
}

const list = document.querySelector("ul");

list.insertAdjacentHTML("beforeend", "<li>শেষে</li>");
list.insertAdjacentHTML("afterbegin", "<li>শুরুতে</li>");

// position: beforebegin / afterbegin / beforeend / afterend

const box = document.querySelector(".box");

box.classList.add("active");
box.classList.remove("active");
box.classList.toggle("dark");     // নেই → যোগ, আছে → বাদ

console.log(box.classList.contains("dark")); // true/false
console.log(box.className); // সব class স্ট্রিং হিসেবে

<button data-user-id="42" data-role="admin">ব্যবহারকারী</button>

<script>
  const btn = document.querySelector("button");

  console.log(btn.dataset.userId); // "42"
  console.log(btn.dataset.role);   // "admin"

  btn.dataset.status = "active";   // data-status যোগ
</script>

const card = document.querySelector(".card");

// Parent
console.log(card.parentElement);

// Children
console.log(card.children);   // HTMLCollection
console.log(card.firstElementChild);
console.log(card.lastElementChild);

// Sibling
console.log(card.nextElementSibling);
console.log(card.previousElementSibling);

// সব children লুপ
Array.from(card.children).forEach((child) => {
  console.log(child.tagName);
});

function createItem(text, className = "") {
  const li = document.createElement("li");
  li.textContent = text;
  if (className) li.className = className;
  return li;
}

const items = ["আম", "কলা", "কমলা"];
const ul = document.querySelector("ul");
items.forEach((item) => ul.append(createItem(item)));