DOM: Basics (ডম)

// id দিয়ে
const header = document.getElementById("header");

// class/CSS selector দিয়ে — প্রথমটি
const card = document.querySelector(".card");

// সবগুলো — NodeList (লুপ করা যায়)
const cards = document.querySelectorAll("div.card");

console.log(header);
console.log(cards.length);

<p id="status">লোড হচ্ছে...</p>

<script>
  const status = document.getElementById("status");

  status.textContent = "সম্পন্ন!";
  console.log(status.textContent); // সম্পন্ন!
</script>

<div id="box"></div>

<script>
  const box = document.getElementById("box");

  box.textContent = "<b>টেক্সট হিসেবে</b>";
  console.log(box.innerHTML); // &lt;b&gt;... — রেন্ডার হয় না

  box.innerHTML = "<b>HTML হিসেবে</b>";
  console.log(box.innerHTML); // <b>HTML হিসেবে</b> — রেন্ডার হয়
</script>

const title = document.querySelector("h1");

title.style.color = "green";
title.style.fontSize = "32px";
title.style.backgroundColor = "#eee";

// দূরত্ব: camelCase — background-color → backgroundColor

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

img.setAttribute("src", "photo.jpg");
img.setAttribute("alt", "আমার ছবি");

console.log(img.getAttribute("alt")); // আমার ছবি

img.removeAttribute("alt");

// ছোট attribute shortcuts
img.src = "photo2.jpg";
img.alt = "নতুন ছবি";

<input id="email" type="email" />

<script>
  const input = document.getElementById("email");
  input.value = "rahim@example.com";
  console.log(input.value); // rahim@example.com
  console.log(input.type);  // email
</script>