JavaScript HTML DOM Elements (Nodes) – বাংলা টিউটোরিয়াল
DOM (Document Object Model) হলো HTML ডকুমেন্টের একটি Tree structure representation। এই গাছের প্রতিটি শাখা বা অংশকে বলা হয় Node। JavaScript ব্যবহার করে এই নোডগুলিকে খুঁজে পাওয়া, পরিবর্তন করা, মুছে ফেলা বা নতুন করে যুক্ত করা যায়। এই নোডগুলো সাধারণত তিন ধরনের হয়:
- Element Node: HTML tag যেমন <p>, <div>, <h1> ইত্যাদি।
- Text Node: HTML ট্যাগের ভিতরের টেক্সট কনটেন্ট।
- Comment Node: HTML কমেন্ট (<!– –>)।
একটি উদাহরণ দেখুন
আমরা একটি `div` এর ভিতরে একটি প্যারাগ্রাফ এবং কিছু টেক্সট রেখে সেটা দিয়ে বিভিন্ন ধরনের Node দেখবো।
<div id="myDiv">
<p>এইটা একটি প্যারাগ্রাফ ট্যাগ।</p>
সাধারণ কিছু লেখা
<!-- এটা একটি কমেন্ট -->
</div>
let div = document.getElementById(“myDiv”);
console.log(” সব চাইল্ড নোড:”, div.childNodes);
console.log(” প্রথম এলিমেন্ট নোড:”, div.firstElementChild);
if (div.childNodes[1].nodeType === 3) {
console.log(” এটি একটি Text Node:”, div.childNodes[1].nodeValue.trim());
}
div.childNodes.forEach(function(node) {
if (node.nodeType === 8) {
console.log(” এটি একটি Comment Node:”, node.nodeValue);
}
});
</script>
DOM Node Type গুলো
Node গুলোর nodeType প্রপার্টি দ্বারা আপনি বুঝতে পারবেন কোনটা Element, Text বা Comment:
| NodeType | বর্ণনা |
|---|---|
| 1 | Element Node (যেমন <div>) |
| 3 | Text Node (HTML এর মধ্যে লেখা) |
| 8 | Comment Node (<!– –>) |
টিপস
- childNodes সব ধরনের নোড (Element, Text, Comment) রিটার্ন করে।
- children শুধুমাত্র Element নোড রিটার্ন করে।
- nodeValue শুধুমাত্র Text বা Comment নোডে কাজ করে।
- console.log ব্যবহার করে নোড গুলোকে inspect করা খুবই সহজ।
উপসংহার
JavaScript DOM Elements (Nodes) নিয়ে কাজ করা মানে আপনি HTML ডকুমেন্টকে তার গঠনগতভাবে (structure) বুঝে নিতে পারবেন। এই নোডগুলো Element, Text, এবং Comment হতে পারে। আপনি চাইলে JavaScript দিয়ে এই নোডগুলো dynamically access, modify বা remove করতে পারবেন। DOM সম্পর্কিত কার্যকলাপ দক্ষভাবে পরিচালনার জন্য নোড টাইপ বোঝা অত্যন্ত গুরুত্বপূর্ণ।
এই জ্ঞান আপনাকে ওয়েব অ্যাপ্লিকেশন তৈরি এবং ডায়নামিক HTML কনটেন্ট ম্যানেজমেন্টে দারুণ সাহায্য করবে।