HTML Document Object Model
The HTML DOM (HTML Document Object Model) is an Object Model for HTML Documents.
DOM HTML tree
The HTML DOM is a tree of Nodes that represents an HTML Page.
The DOM Tree
যখন একটি ওয়েব পেজ লোড করা হয়, ব্রাউজারটি এইচটিএমএল ডকুমেন্টের একটি গাছের মতো উপস্থাপনা তৈরি করে।
নথির প্রতিটি অংশ গাছের একটি নোড:
| Node | Description | Example |
|---|---|---|
| Document | নথিতে সমস্ত নোডের মালিক৷ | সম্পূর্ণ HTML নথি |
| <html> | Element Node | রুট HTML উপাদান |
| <head> | Element Node | শিরোনাম বিভাগ |
| <body> | Element Node | প্রধান বিষয়বস্তু এলাকা |
| <a> | Element Node | লিঙ্ক উপাদান |
| href | Attribute Node | লিঙ্ক বৈশিষ্ট্য |
| <h1> | Element Node | শিরোনাম উপাদান |
| My Header | Text Node | পাঠ্য বিষয়বস্তু |
DOM গাছের ধারণা:
প্রতিটি এইচটিএমএল উপাদান DOM ট্রিতে একটি "নোড"। এই নোডগুলিতে পিতামাতা, ভাইবোন এবং সন্তানের সম্পর্ক রয়েছে, একটি পারিবারিক গাছের মতো।
Accessing HTML Elements
The HTML DOM can be used to access HTML elements.
একটি HTML উপাদান অ্যাক্সেস করার সবচেয়ে সাধারণ উপায় হল উপাদানের আইডি ব্যবহার করা:
Example
Accessing Element by ID
<html>
<body>
<p id="demo"></p>
<script>
// Access a paragraph Element
const myPara = document.getElementById("demo");
// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>
</body>
</html>উপরের উদাহরণে, উপাদান খুঁজে পেতেgetElementByIdপদ্ধতিid="demo"ব্যবহার করে
id="demo"
একটি HTML বৈশিষ্ট্য
getElementById()
একটি DOM পদ্ধতি
innerHTML
একটি DOM বৈশিষ্ট্য
What You Will Learn
এই টিউটোরিয়ালের পরবর্তী অধ্যায়ে আপনি শিখবেন:
The World Wide Web Consortium
The DOM is a W3C Standard (World Wide Web Consortium):
W3C সংজ্ঞা:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
("W3C ডকুমেন্ট অবজেক্ট মডেল (DOM) হল একটি প্ল্যাটফর্ম এবং ভাষা-নিরপেক্ষ ইন্টারফেস যা প্রোগ্রাম এবং স্ক্রিপ্টগুলিকে একটি নথির বিষয়বস্তু, গঠন এবং শৈলীকে গতিশীলভাবে অ্যাক্সেস এবং আপডেট করতে দেয়।")
The W3C DOM standard is separated into 3 different parts:
Core DOM
সব ধরনের নথির জন্য স্ট্যান্ডার্ড টেমপ্লেট
XML DOM
XML নথির জন্য একটি আদর্শ মডেল
HTML DOM
HTML নথির জন্য একটি আদর্শ মডেল
দ্রষ্টব্য:
HTML DOM হল W3C এবং WHATWG দ্বারা বিকশিত একটি অ-ভাষা মান।
Common DOM Methods and Properties
| Type | Name | Description | Example |
|---|---|---|---|
| Method | getElementById() |
আইডি দ্বারা উপাদান খুঁজুন | document.getElementById("demo") |
| Method | getElementsByTagName() |
ট্যাগ নাম দ্বারা উপাদান খুঁজুন | document.getElementsByTagName("p") |
| Method | getElementsByClassName() |
শ্রেণীর নাম অনুসারে উপাদান খুঁজুন | document.getElementsByClassName("box") |
| Property | innerHTML |
উপাদানটির HTML সামগ্রী পায় বা সেট করে | element.innerHTML = "New Content" |
| Property | style |
উপাদান শৈলী পরিবর্তন | element.style.color = "red" |
| Property | className |
এলিমেন্টের ক্লাস নাম পায় বা সেট করে | element.className = "new-class" |