এইচটিএমএল ডোম ব্যবহার করে জাভাস্ক্রিপ্ট এইচটিএমএল ডকুমেন্টের সকল এলিমেন্টকে এক্সেস এবং পরিবর্তন করতে পারে।
এইচটিএমএল ডোম/ডকুমেন্ট অবজেক্ট মডেল
যখন একটি ওয়েব পেজ ব্রাউজারে সম্পূর্ণভাবে লোড হয় ব্রাউজারটি পেজের একটি ডকুমেন্ট অবজেক্ট মডেল তৈরি করে।
সাধারণত অবজেক্টের একটি ট্রি আকারে এইচটিএমএল ডোম মডেলটি তৈরি করা হয়:
একটি এইচটিএমএল ডোম ট্রি
একটি ডায়নামিক এইচটিএমএল পেজ তৈরি করার জন্য জাভাস্ক্রিপ্ট অবজেক্ট মডেল দ্বারা সব ধরনের ক্ষমতা অর্জন করে :
- জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল এলিমেন্টকে পরিবর্তন করতে পারে।
- জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল এট্রিবিউটকে পরিবর্তন করতে পারে।
- জাভাস্ক্রিপ্ট একটি পেজের সকল সিএসএস স্টাইলকে পরিবর্তন করতে পারে।
- জাভাস্ক্রিপ্ট একটি পেজের বিদ্যমান এইচটিএমএল এলিমেন্ট এবং এট্রিবিউটকে বাদ দিতে পারে।
- জাভাস্ক্রিপ্ট নতুন এইচটিএমএল এলিমেন্ট এবং এট্রিবিউট যোগ করতে পারে।
- জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল ইভেন্টের প্রতিক্রিয়া ঘটাতে পারে।
- জাভাস্ক্রিপ্ট একটি পেজে নতুন এইচটিএমএল ইভেন্ট তৈরি করতে পারে।
যেসকল বিষয় সম্পর্কে জানতে পারবেন:
- এইচটিএমএল এলিমেন্টের কন্টেন্ট কিভাবে পরিবর্তন করা যায়
- এইচটিএমএল এলিমেন্টের স্টাইল(সিএসএস) কিভাবে পরিবর্তন করা যায়
- এইচটিএমএল ডোম ইভেন্ট কিভাবে ঘটানো যায়
- এইচটিএমএল এলিমেন্ট কিভাবে তৈরি এবং বাদ দেয়া যায়
ডোম কি?
ডোম W3C (World Wide Web Consortium) এর স্ট্যান্ডার্ড।
ডোম ডকুমেন্টকে এক্সেস করার একটি স্ট্যান্ডার্ড নির্দেশ করে:
W3C ডোম স্ট্যান্ডার্ড ৩টি ভিন্ন ভিন্ন অংশে বিভক্ত:
- Core DOM - সব ধরনের ডকুমেন্টের জন্য আদর্শ মডেল
- XML DOM - এক্সএমএল ডকুমেন্টের জন্যে একটি আদর্শ মডেল
- HTML DOM - এইচটিএমএল ডকুমেন্টের জন্য একটি স্ট্যান্ডার্ড মডেল
এইচটিএমএল ডোম কি?
এইচটিএমএল ডোম এইচটিএমএলের জন্য একটি স্ট্যান্ডার্ড অবজেক্ট মডেল এবং প্রোগ্রামিং ইন্টারফেস।এটা যা নির্দেশ করেঃ
- এইচটিএমএল এলিমেন্টকে অবজেক্ট হিসেবে।
- সকল এইচটিএমএল এলিমেন্টের প্রোপার্টি
- সকল এইচটিএমএল এলিমেন্টকে এক্সেস করার জন্য মেথড
- সকল এইচটিএমএল এলিমেন্টের জন্য ইভেন্ট
অন্যকথায়: এইচটিএমএল এলিমেন্টকে পেতে, পরিবর্তন করতে, যোগ করতে, ডিলিট করার জন্য এইচটিএমএল ডোম হলো স্ট্যান্ডার্ড।
এইচটিএমএল ডোম মেথডগুলো হলো প্রক্রিয়া বা কাজ যা আপনি এইচটিএমএল এলিমেন্টে ঘটাতে পারবেন।
এইচটিএমএল ডোম এলিমেন্টের প্রোপার্টিগুলো হলো ভ্যালু যা আপনি যেকোন সময় সেট অথবা পরিবর্তন করতে পারেন।
ডোম প্রোগ্রামিং ইন্টারফেস
জাভাস্ক্রিপ্ট দ্বারা এইচটিএমএল ডোমকে এক্সেস করা যায়(অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজ দিয়েও করা যায়)।
ডোম-এ সকল এইচটিএমএল এলিমেন্টকে অবজেক্ট হিসেবে বিবেচনা করা হয়।
প্রতিটি অবজেক্টের প্রোপার্টি এবং মেথড হলো প্রোগ্রামিং ইন্টারফেস।
প্রোপার্টি হলো একটি ভ্যালু যা আপনি এক্সেস করতে পারেন বা সেট করতে পারেন(যেমনঃ একটি এইচটিএমএল এলিমেন্টের কন্টেন্টকে পরিবর্তন করা)।
মেথডহলো আপনি যা ঘটাবেন(যেমনঃ এইচটিএমএল এলিমেন্ট বাদ দেয়া বা যোগ করা)।
উদাহরণ
নিম্নলিখিত উদাহরণে id="test" যুক্ত
kt_satt_skill_example_id=1323
উপরোক্ত উদাহরণে, getElementById হলো একটি মেথড যেখানে innerHTML হলো একটি প্রোপার্টি।
getElementById মেথড
একটি এইচটিএমএল এলিমেন্টকে এক্সেস করার সবচেয়ে সহজ পদ্ধতি হলো এলিমেন্টের id ব্যবহার করা।
উপরোক্ত উদাহরণে, এলিমেন্টকে খুজে পেতে getElementById মেথড id="test" ব্যবহার করেছে।
innerHTML প্রোপার্টি
একটি এলিমেন্টের কন্টেন্টকে এক্সেস অথবা পরিবর্তন করার সবচেয়ে সহজ পদ্ধতি হলো innerHTML প্রোপার্টি ব্যবহার করা।
একটি ওয়েব পেজের সকল অবজেক্টের মালিক হলো এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট।
এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট
ডকুমেন্ট অবজেক্ট একটি পেজকে প্রদর্শন করে।
একটি এইচটিএমএল পেজের যেকোন এলিমেন্টকে এক্সেস করতে অবশ্যই ডকুমেন্ট অবজেক্ট দিয়ে শুরু করতে হবে।
নিম্নলিখিত উদাহরণে এইচটিএমএল এলিমেন্টকে কিভাবে এক্সেস এবং পরিচালনা করা যায় তা দেখানো হলো:
এইচটিএমএল এলিমেন্ট খুজে বের করা
| মেথড | বর্ণনা |
|---|---|
| document.getElementById(id) | এলিমেন্টের id দ্বারা এলিমেন্টকে খুঁজে বের করা হয় |
| document.getElementsByTagName(name) | ট্যাগের নাম দিয়ে এলিমেন্টকে খুঁজে বের করা হয় |
| document.getElementsByClassName(name) | এলিমেন্টের class দ্বারা এলিমেন্টকে খুঁজে বের করা হয় |
এইচটিএমএল এলিমেন্ট পরিবর্তন
| মেথড | বর্ণনা |
|---|---|
| element.innerHTML = নতুন এইচটিএমএল কন্টেন্ট | একটি এলিমেন্টের ভিতরের কন্টেন্টকে পরিবর্তন করে |
| element.attribute = নতুন ভ্যালু | এইচটিএমএল এলিমেন্টের এট্রিবিউট ভ্যালু পরিবর্তন করে |
| element.setAttribute(এট্রিবিউট, ভেলু(value)) | এইচটিএমএল এলিমেন্টের এট্রিবিউট ভ্যালু পরিবর্তন করে |
| element.style.property = নতুন স্টাইল | এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করে |
এলিমেন্ট যোগ এবং বাদ দেওয়া
| মেথড | বর্ণনা |
|---|---|
| document.createElement(এলিমেন্ট) | নতুন এলিমেন্ট তৈরি করে |
| document.removeChild(এলিমেন্ট) | এইচটিএমএল এলিমেন্টকে মুছে দেয় |
| document.appendChild(এলিমেন্ট) | এইচটিএমএল এলিমেন্ট যোগ করে |
| document.replaceChild(এলিমেন্ট) | এইচটিএমএল এলিমেন্টকে প্রতিস্থাপন করে |
| document.write(টেক্সট) | এইচটিএমএল ডকুমেন্টে লিখার জন্য ব্যবহার করে |
ইভেন্ট হ্যান্ডলার সংযুক্ত করার পদ্ধতি
| মেথড | বর্ণনা |
|---|---|
| document.getElementById(id).onclick = function(){কোড} | একটি অনক্লিক ইভেন্টে ইভেন্ট হ্যান্ডলার কোড যোগ করে |
এইচটিএমএল অবজেক্টকে এক্সেস
প্রথম এইচটিএমএল ডোম আবিষ্কৃত হয় ১৯৯৮ সালে, যেখানে ১১টি এইচটিএমএল অবজেক্ট, অবজেক্ট কালেকশন এবং প্রোপার্টি ছিল। এগুলো এইচটিএমএল ৫ এ এখনো ভ্যালিড।
পরবর্তীতে এইচটিএমএল ডোম লেভেল ৩ এ আরও অবজেক্ট, অবজেক্ট কালেকশন, এবং প্রোপার্টি সংযুক্ত করা হয়েছে।
| প্রোপার্টি | বর্ণনা | ডোম |
|---|---|---|
| document.anchors | যেসকল এলিমেন্টের name এট্রিবিউট রয়েছে সেগুলোকে রিটার্ন করে | ১ |
| document.applets | সকল | ১ |
| document.baseURI | ডকুমেন্টের base URI রিটার্ন করে | ৩ |
| document.body | এলিমেন্টকে রিটার্ন করে | ১ |
| document.cookie | ডকুমেন্টের কুকি রিটার্ন করে | ১ |
| document.doctype | ডকুমেন্টের doctype এর নাম রিটার্ন করে | ৩ |
| document.documentElement | এলিমেন্টকে রিটার্ন করে | ৩ |
| document.documentMode | ব্রাউজারের ব্যবহৃত মুডকে রিটার্ন করে | ৩ |
| document.documentURI | ডকুমেন্টের URI রিটার্ন করে | ৩ |
| document.domain | ডকুমেন্ট সার্ভারের ডোমেইনের নাম রিটার্ন করে | ১ |
| document.domConfig | অপ্রচলিত ডোম কনফিগারেশান রিটার্ন করে | ৩ |
| document.embeds | সকল | ৩ |
| document.forms | সকল | ১ |
| document.head | এলিমেন্ট রিটার্ন করে | ৩ |
| document.images | সকল | ১ |
| document.implementation | ডোম ইমপ্লিমেনটেশন রিটার্ন করে | ৩ |
| document.inputEncoding | ডকুমেন্ট এনকোডিং রিটার্ন করে | ৩ |
| document.lastModified | ডকুমেন্ট আপডেট হওয়ার তারিখ এবং সময় রিটার্ন করে | ৩ |
| document.links | যেসকল এবং এলিমেন্টে href এট্রিবিউট রয়েছে সেগুলোকে রিটার্ন করে | ১ |
| document.readyState | ডকুমেন্টের স্ট্যাটাস রিটার্ন করে | ৩ |
| document.referrer | লিঙ্কিং ডকুমেন্টের নির্দেশকের URI রিটার্ন করে | 1 |
| document.scripts | সকল |