HTML DOM API
DOM API (অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস) হল পদ্ধতি এবং বৈশিষ্ট্যগুলির একটি সংগ্রহ যা জাভাস্ক্রিপ্টকে HTML উপাদানগুলির বিষয়বস্তু, গঠন এবং শৈলীকে ম্যানিপুলেট করার অনুমতি দেয়।
DOM হল HTML ট্রি
একটি API পদ্ধতি হল একটি ক্রিয়া যা আপনি একটি HTML উপাদানে সম্পাদন করতে পারেন।
একটি API বৈশিষ্ট্য হল একটি মান যা আপনি একটি HTML উপাদানে অ্যাক্সেস করতে পারেন।
উদাহরণ
<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>উদাহরণ বর্ণনা
নথি একটি HTML নথি।
getElementById() একটি নথি পদ্ধতি।
myPara = getElementById("demo") "ডেমো" উপাদান পায়।
innerHTML হল একটি উপাদান বৈশিষ্ট্য।
myPara.innerHTML = "Hello World!" .
HTML DOM API ক্ষমতা
DOM API আমাদের নিম্নলিখিত ক্ষমতা প্রদান করে:
- উপাদান খুঁজুন এবং নির্বাচন করুন
- উপাদান বিষয়বস্তু এবং গুণাবলী পরিবর্তন
- উপাদান যোগ করুন, মুছুন বা সংশোধন করুন
- CSS শৈলী পরিবর্তন করুন
- ব্যবহারকারীর ইনপুটে প্রতিক্রিয়া জানাতে ইভেন্ট শ্রোতাদের যোগ করুন
জাভাস্ক্রিপ্ট ভাষা
কিভাবে HTML DOM উপাদানগুলি পেতে, সংশোধন করতে, যোগ করতে বা সরাতে হয় তার জন্য DOM API হল একটি আদর্শ৷
JavaScript হল একটি API এর মাধ্যমে DOM অ্যাক্সেস করতে ব্রাউজারদের দ্বারা ব্যবহৃত ভাষা।
API পদ্ধতি এবং বৈশিষ্ট্য
ডেভেলপাররা যেকোন এপিআই-এর এন্ট্রি পয়েন্ট হিসেবে নথি এবং উইন্ডোর মতো গ্লোবাল অবজেক্ট ব্যবহার করে।
আপনি যখন একটি HTML পৃষ্ঠার কোনো উপাদান অ্যাক্সেস করতে চান, আপনি সর্বদা নথি বস্তুটি অ্যাক্সেস করে শুরু করেন। নথি বস্তু আপনার ওয়েব পৃষ্ঠা প্রতিনিধিত্ব করে.
জাভাস্ক্রিপ্টের সাথে HTML ম্যানিপুলেট করতে, আপনাকে প্রথমে একটি উপাদান নির্বাচন করতে হবে।
এইচটিএমএল অ্যাক্সেস করতে ডকুমেন্ট অবজেক্ট কীভাবে ব্যবহার করা যেতে পারে তার কিছু উদাহরণ নীচে দেওয়া হল:
HTML উপাদান নির্বাচন
| পদ্ধতি | ব্যাখ্যা |
|---|---|
| document.getElementById(id) | উপাদান আইডি দ্বারা একটি উপাদান খুঁজুন |
| document.getElementsByTagName(name) | ট্যাগ নাম দ্বারা উপাদান খুঁজুন |
| document.getElementsByClassName(name) | শ্রেণীর নাম অনুসারে উপাদান খুঁজুন |
| document.querySelector(selector) | CSS নির্বাচকের সাথে মেলে এমন প্রথম উপাদানটি খুঁজুন |
| document.querySelectorAll(selector) | একটি CSS নির্বাচকের সাথে সমস্ত মিলে যাওয়া উপাদান খুঁজুন |
দ্রষ্টব্য:
ডকুমেন্ট অবজেক্ট হল আপনার ওয়েব পেজের অন্য সব অবজেক্টের মালিক।
উপাদান বিষয়বস্তু অ্যাক্সেস
| বৈশিষ্ট্য | ব্যাখ্যা |
|---|---|
| element.innerHTML | একটি উপাদানের HTML বিষয়বস্তু |
| element.textContent | একটি উপাদানের পাঠ্য বিষয়বস্তু |
এলিমেন্ট অ্যাট্রিবিউট অ্যাক্সেস করা
| বৈশিষ্ট্য | ব্যাখ্যা |
|---|---|
| element.attribute | একটি HTML উপাদানের বৈশিষ্ট্য মান পরিবর্তন করুন |
| element.style.property | এইচটিএমএল উপাদান শৈলী |
উপাদান বৈশিষ্ট্য পরিবর্তন
| পদ্ধতি | ব্যাখ্যা |
|---|---|
| element.setAttribute() | একটি নতুন বৈশিষ্ট্য তৈরি করুন বা সেট করুন |
স্ট্রাকচার ম্যানিপুলেশন
| পদ্ধতি | ব্যাখ্যা |
|---|---|
| document.createElement() | একটি নতুন HTML উপাদান তৈরি করে |
| document.removeChild() | HTML উপাদান সরান |
| document.appendChild() | একটি HTML উপাদান যোগ করুন |
| document.replaceChild() | HTML উপাদান প্রতিস্থাপন |
ইভেন্ট হ্যান্ডলার যোগ করা হচ্ছে
| পদ্ধতি | ব্যাখ্যা |
|---|---|
| document.getElementById(id).onclick = function(){code} | একটি অনক্লিক ইভেন্টে ইভেন্ট হ্যান্ডলার কোড যোগ করা হচ্ছে |