Skill Development

জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (JS HTML DOM)

Please, contribute to add content into জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (JS HTML DOM).
Content

ডোম পরিচিতি (DOM Intro)

এইচটিএমএল ডোম ব্যবহার করে জাভাস্ক্রিপ্ট এইচটিএমএল ডকুমেন্টের সকল এলিমেন্টকে এক্সেস এবং পরিবর্তন করতে পারে।


এইচটিএমএল ডোম/ডকুমেন্ট অবজেক্ট মডেল

যখন একটি ওয়েব পেজ ব্রাউজারে সম্পূর্ণভাবে লোড হয় ব্রাউজারটি পেজের একটি ডকুমেন্ট অবজেক্ট মডেল তৈরি করে।

সাধারণত অবজেক্টের একটি ট্রি আকারে এইচটিএমএল ডোম মডেলটি তৈরি করা হয়:

                                                                                                        একটি এইচটিএমএল ডোম ট্রি

 

DOM HTML tree

 

একটি ডায়নামিক এইচটিএমএল পেজ তৈরি করার জন্য জাভাস্ক্রিপ্ট অবজেক্ট মডেল দ্বারা সব ধরনের ক্ষমতা অর্জন করে :

  • জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল এলিমেন্টকে পরিবর্তন করতে পারে।
  • জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল এট্রিবিউটকে পরিবর্তন করতে পারে।
  • জাভাস্ক্রিপ্ট একটি পেজের সকল সিএসএস স্টাইলকে পরিবর্তন করতে পারে।
  • জাভাস্ক্রিপ্ট একটি পেজের বিদ্যমান এইচটিএমএল এলিমেন্ট এবং এট্রিবিউটকে বাদ দিতে পারে।
  • জাভাস্ক্রিপ্ট নতুন এইচটিএমএল এলিমেন্ট এবং এট্রিবিউট যোগ করতে পারে।
  • জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল ইভেন্টের প্রতিক্রিয়া ঘটাতে পারে।
  • জাভাস্ক্রিপ্ট একটি পেজে নতুন এইচটিএমএল ইভেন্ট তৈরি করতে পারে।

যেসকল বিষয় সম্পর্কে জানতে পারবেন:

  • এইচটিএমএল এলিমেন্টের কন্টেন্ট কিভাবে পরিবর্তন করা যায়
  • এইচটিএমএল এলিমেন্টের স্টাইল(সিএসএস) কিভাবে পরিবর্তন করা যায়
  • এইচটিএমএল ডোম ইভেন্ট কিভাবে ঘটানো যায়
  • এইচটিএমএল এলিমেন্ট কিভাবে তৈরি এবং বাদ দেয়া যায়

ডোম কি?

ডোম W3C (World Wide Web Consortium) এর স্ট্যান্ডার্ড।

ডোম ডকুমেন্টকে এক্সেস করার একটি স্ট্যান্ডার্ড নির্দেশ করে:

W3C ডোম স্ট্যান্ডার্ড ৩টি ভিন্ন ভিন্ন অংশে বিভক্ত:

  • Core DOM - সব ধরনের ডকুমেন্টের জন্য আদর্শ মডেল
  • XML DOM - এক্সএমএল ডকুমেন্টের জন্যে একটি আদর্শ মডেল
  • HTML DOM - এইচটিএমএল ডকুমেন্টের জন্য একটি স্ট্যান্ডার্ড মডেল

এইচটিএমএল ডোম কি?

এইচটিএমএল ডোম এইচটিএমএলের জন্য একটি স্ট্যান্ডার্ড অবজেক্ট মডেল এবং প্রোগ্রামিং ইন্টারফেস।এটা যা নির্দেশ করেঃ

  • এইচটিএমএল এলিমেন্টকে অবজেক্ট হিসেবে।
  • সকল এইচটিএমএল এলিমেন্টের প্রোপার্টি
  • সকল এইচটিএমএল এলিমেন্টকে এক্সেস করার জন্য মেথড
  • সকল এইচটিএমএল এলিমেন্টের জন্য ইভেন্ট

অন্যকথায়: এইচটিএমএল এলিমেন্টকে পেতে, পরিবর্তন করতে, যোগ করতে, ডিলিট করার জন্য এইচটিএমএল ডোম হলো স্ট্যান্ডার্ড।

Content added || updated By

এইচটিএমএল ডোম মেথডগুলো হলো প্রক্রিয়া বা কাজ যা আপনি এইচটিএমএল এলিমেন্টে ঘটাতে পারবেন।

এইচটিএমএল ডোম এলিমেন্টের প্রোপার্টিগুলো হলো ভ্যালু যা আপনি যেকোন সময় সেট অথবা পরিবর্তন করতে পারেন।


ডোম প্রোগ্রামিং ইন্টারফেস

জাভাস্ক্রিপ্ট দ্বারা এইচটিএমএল ডোমকে এক্সেস করা যায়(অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজ দিয়েও করা যায়)।

ডোম-এ সকল এইচটিএমএল এলিমেন্টকে অবজেক্ট হিসেবে বিবেচনা করা হয়।

প্রতিটি অবজেক্টের প্রোপার্টি এবং মেথড হলো প্রোগ্রামিং ইন্টারফেস।

প্রোপার্টি হলো একটি ভ্যালু যা আপনি এক্সেস করতে পারেন বা সেট করতে পারেন(যেমনঃ একটি এইচটিএমএল এলিমেন্টের কন্টেন্টকে পরিবর্তন করা)।

মেথডহলো আপনি যা ঘটাবেন(যেমনঃ এইচটিএমএল এলিমেন্ট বাদ দেয়া বা যোগ করা)।


উদাহরণ

নিম্নলিখিত উদাহরণে id="test" যুক্ত

এলিমেন্টের কন্টেন্ট(innerHTML) পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1323

উপরোক্ত উদাহরণে, getElementById হলো একটি মেথড যেখানে innerHTML হলো একটি প্রোপার্টি


getElementById মেথড

একটি এইচটিএমএল এলিমেন্টকে এক্সেস করার সবচেয়ে সহজ পদ্ধতি হলো এলিমেন্টের id ব্যবহার করা।

উপরোক্ত উদাহরণে, এলিমেন্টকে খুজে পেতে getElementById মেথড id="test" ব্যবহার করেছে।


innerHTML প্রোপার্টি

একটি এলিমেন্টের কন্টেন্টকে এক্সেস অথবা পরিবর্তন করার সবচেয়ে সহজ পদ্ধতি হলো innerHTML প্রোপার্টি ব্যবহার করা।

Content added || updated By

ডোম ডকুমেন্ট (DOM Document)

একটি ওয়েব পেজের সকল অবজেক্টের মালিক হলো এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট।


এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট

ডকুমেন্ট অবজেক্ট একটি পেজকে প্রদর্শন করে।

একটি এইচটিএমএল পেজের যেকোন এলিমেন্টকে এক্সেস করতে অবশ্যই ডকুমেন্ট অবজেক্ট দিয়ে শুরু করতে হবে।

নিম্নলিখিত উদাহরণে এইচটিএমএল এলিমেন্টকে কিভাবে এক্সেস এবং পরিচালনা করা যায় তা দেখানো হলো:


এইচটিএমএল এলিমেন্ট খুজে বের করা

মেথডবর্ণনা
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সকল এলিমেন্টকে রিটার্ন করে (এইচটিএমএল 5 এ অনুমোদন বাদ দেয়া হয়েছে)
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সকল