জাভাস্ক্রিপ্ট এইচটিএমএল ডোম ডকুমেন্ট
একটি ওয়েব পেজের সকল অবজেক্টের মালিক হলো এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট।
এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট
ডকুমেন্ট অবজেক্ট একটি পেজকে প্রদর্শন করে।
একটি এইচটিএমএল পেজের যেকোন এলিমেন্টকে এক্সেস করতে অবশ্যই ডকুমেন্ট অবজেক্ট দিয়ে শুরু করতে হবে।
নিম্নলিখিত উদাহরণে এইচটিএমএল এলিমেন্টকে কিভাবে এক্সেস এবং পরিচালনা করা যায় তা দেখানো হলো:
এইচটিএমএল এলিমেন্ট খুজে বের করা
| মেথড | বর্ণনা |
|---|---|
| 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 | যেসকল <a> এলিমেন্টের name এট্রিবিউট রয়েছে সেগুলোকে রিটার্ন করে | ১ |
| document.applets | সকল <applet> এলিমেন্টকে রিটার্ন করে (এইচটিএমএল 5 এ অনুমোদন বাদ দেয়া হয়েছে) | ১ |
| document.baseURI | ডকুমেন্টের base URI রিটার্ন করে | ৩ |
| document.body | <body> এলিমেন্টকে রিটার্ন করে | ১ |
| document.cookie | ডকুমেন্টের কুকি রিটার্ন করে | ১ |
| document.doctype | ডকুমেন্টের doctype এর নাম রিটার্ন করে | ৩ |
| document.documentElement | <html> এলিমেন্টকে রিটার্ন করে | ৩ |
| document.documentMode | ব্রাউজারের ব্যবহৃত মুডকে রিটার্ন করে | ৩ |
| document.documentURI | ডকুমেন্টের URI রিটার্ন করে | ৩ |
| document.domain | ডকুমেন্ট সার্ভারের ডোমেইনের নাম রিটার্ন করে | ১ |
| document.domConfig | অপ্রচলিত ডোম কনফিগারেশান রিটার্ন করে | ৩ |
| document.embeds | সকল <embed> এলিমেন্ট রিটার্ন করে | ৩ |
| document.forms | সকল <form> এলিমেন্ট রিটার্ন করে | ১ |
| document.head | <head> এলিমেন্ট রিটার্ন করে | ৩ |
| document.images | সকল <img> এলিমেন্ট রিটার্ন করে | ১ |
| document.implementation | ডোম ইমপ্লিমেনটেশন রিটার্ন করে | ৩ |
| document.inputEncoding | ডকুমেন্ট এনকোডিং রিটার্ন করে | ৩ |
| document.lastModified | ডকুমেন্ট আপডেট হওয়ার তারিখ এবং সময় রিটার্ন করে | ৩ |
| document.links | যেসকল <area> এবং <a> এলিমেন্টে href এট্রিবিউট রয়েছে সেগুলোকে রিটার্ন করে | ১ |
| document.readyState | ডকুমেন্টের স্ট্যাটাস রিটার্ন করে | ৩ |
| document.referrer | লিঙ্কিং ডকুমেন্টের নির্দেশকের URI রিটার্ন করে | 1 |
| document.scripts | সকল <script> এলিমেন্টকে রিটার্ন করে | 3 |
| document.strictErrorChecking | এঁরর চেকিং সচল আছে কিনা রিটার্ন করে | 3 |
| document.title | <title> এলিমেন্টকে রিটার্ন করে | 1 |
| document.URL | ডকুমেন্টের সম্পূর্ন URL রিটার্ন করে | 1 |