JavaScript HTML DOM Bangla Tutorial – Beginner Friendly Guide ·

What is JavaScript DOM?

JavaScript DOM (Document Object Model) এমন একটি সিস্টেম, যার মাধ্যমে ব্রাউজার একটি HTML পেজকে object আকারে represent করে।

সহজভাবে বললে, একটি ওয়েবপেজের প্রতিটি element যেমন heading, paragraph, button সবগুলোই আলাদা object হিসেবে থাকে, আর JavaScript এই object গুলোর সাথে সরাসরি interact করতে পারে।

এর ফলে তুমি খুব সহজেই কোনো element এর content, design বা behavior change করতে পারো, সেটাও আবার page reload ছাড়াই। এই কারণেই JavaScript DOM modern web development এর একটি core concept।

How JavaScript DOM Works

যখন একটি HTML file browser এ load হয়, তখন সেটি DOM tree তে convert হয়।

এই tree structure টা অনেকটা family tree এর মতো, যেখানে parent, child এবং sibling relation থাকে।

JavaScript এই structure ব্যবহার করে নির্দিষ্ট element খুঁজে বের করে এবং সেটাকে modify করে।

ধরো তুমি একটা button এ click করলে কোনো text change করতে চাও এই কাজটা DOM এর মাধ্যমেই করা হয়।

নিচের example টা দেখো:

<html>
<body><h1 id="demo">This is some text</h1>
<button onclick="changeText()">Change Text</button><script>
function changeText() {
  let element = document.getElementById("demo");
  element.textContent = "Text changed by JavaScript!";
}
</script></body>
</html>

এখানে button এ click করলে heading এর text change হয়ে যায় এটাই DOM এর basic usage।

Accessing Elements in DOM

জাভাস্ক্রিপ্ট DOM ব্যবহার করে element access করা খুবই সহজ। তুমি id, class বা CSS selector ব্যবহার করে element খুঁজে নিতে পারো।

getElementById সবচেয়ে common method, তবে modern project গুলোতে querySelector বেশি ব্যবহার হয় কারণ এটা flexible।

let heading = document.getElementById("demo");
console.log(heading.textContent);let firstPara = document.querySelector("p");
console.log(firstPara.textContent);

এইভাবে তুমি খুব সহজেই page এর নির্দিষ্ট element access করতে পারো।

DOM Manipulation (Changing Content & Attributes)

DOM এর সবচেয়ে powerful feature হলো manipulation। অর্থাৎ, তুমি runtime এ element এর content বা attribute change করতে পারো।

document.getElementById("demo").textContent = "New Heading";
document.getElementById("demo").innerHTML = "<b>Bold Text</b>";

এছাড়া attribute change করাও খুব সহজ:

document.getElementById("myImage").src = "new-image.jpg";

এইভাবে dynamic content update করা যায়, যা user experience কে অনেক smooth করে।

Adding and Removing Elements

জাভাস্ক্রিপ্ট DOM ব্যবহার করে নতুন element তৈরি করা এবং পুরনো element remove করাও সম্ভব।

Dynamic website বানানোর জন্য এই feature খুব গুরুত্বপূর্ণ।

let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph";
document.body.appendChild(newPara);

এভাবে নতুন element add করা যায়। আবার remove করতে চাইলে:

let oldElement = document.getElementById("demo");
oldElement.remove();

Event Handling in JavaScript DOM

User interaction handle করার জন্য DOM এ event system থাকে। যেমন button click, keyboard press ইত্যাদি। addEventListener ব্যবহার করে সহজেই event handle করা যায়।

document.getElementById("btn").addEventListener("click", function() {
  alert("Button Clicked!");
});

এছাড়া event object ব্যবহার করে user action সম্পর্কে আরও তথ্য পাওয়া যায়:

document.getElementById("input").addEventListener("keyup", function(e) {
  console.log("Pressed key:", e.key);
});

Traversing the DOM

DOM tree এর মধ্যে navigation করার জন্য JavaScript কিছু property দেয়, যেমন parentNode, children ইত্যাদি। এগুলো ব্যবহার করে element এর সম্পর্ক বুঝে কাজ করা যায়।

let parent = document.getElementById("demo").parentNode;
console.log(parent.tagName);let children = document.body.children;
console.log(children.length);

জাভাস্ক্রিপ্ট DOM web development এর সবচেয়ে গুরুত্বপূর্ণ concept গুলোর একটি।

HTML structure দেয়, CSS design দেয়, আর JavaScript DOM সেই structure কে dynamic এবং interactive করে তোলে। তুমি যদি real-world project build করতে চাও, তাহলে DOM manipulation ভালোভাবে জানা একদম জরুরি।

এটা ভালোভাবে শিখতে পারলে তুমি সহজেই modern, interactive website বিল্ড করতে পারবে।

Summary :

JavaScript DOM (Document Object Model) allows developers to dynamically access, modify, and control HTML elements in a webpage. In this beginner-friendly guide, you’ll learn how the DOM works, how to select elements using methods like getElementById and querySelector, and how to update content, attributes, and styles in real time. The tutorial also covers adding and removing elements, handling user events, and navigating the DOM tree. Mastering JavaScript DOM is essential for building interactive, responsive, and modern web applications.