HTML DOM Element অবজেক্ট

Element অবজেক্ট

HTML DOM-এ, Element অবজেক্ট HTML এলিমেন্টকে প্রতিনিধিত্ব করে, যেমন P, DIV, A, TABLE বা অন্য কোনও HTML এলিমেন্ট।

অ্যাট্রিবিউট ও পদ্ধতি

সকল HTML এলিমেন্টের জন্য নিম্নলিখিত অ্যাট্রিবিউট ও পদ্ধতি ব্যবহার্য:

অ্যাট্রিবিউট / পদ্ধতি বর্ণনা
accessKey এলিমেন্টের accesskey অ্যাট্রিবিউট সেট করুন বা তা জানান。
addEventListener() এলিমেন্টের ইভেন্ট হ্যান্ডলার যুক্ত করুন。
appendChild() নতুন সাব-নোড নোডকে এলিমেন্টে যুক্ত করুন (অথবা যোগ করুন)。
attributes এলিমেন্টের অ্যাট্রিবিউট ন্যামড নোডম্যাপ জানান。
blur() এলিমেন্ট থেকে ফোকাস সরিয়ে দিন।
childElementCount এলিমেন্টের সাব-এলিমেন্ট সংখ্যা জানান。
childNodes এলিমেন্টের সাব-নোড নোডলিস্ট জানান。
children এলিমেন্টের সাব-এলিমেন্টের HTMLCollection জানান。
classList এলিমেন্টের class নাম জানান。
className এলিমেন্টের class অ্যাট্রিবিউট সেট করুন বা তা জানান。
click() এলিমেন্টের উপর মাউস ক্লিক মিমিক্রি করুন。
clientHeight এলিমেন্টের উচ্চতা জানান, অন্তর্বর্তী প্যাডিং সহ।
clientLeft এলিমেন্টের বামবর্তী ফার্মওয়াল প্রস্থতা জানান。
clientTop এলিমেন্টের উপরবর্তী ফার্মওয়াল প্রস্থতা জানান。
clientWidth এলিমেন্টের প্রস্থতা জানান, অন্তর্বর্তী প্যাডিং সহ।
cloneNode() এলিমেন্ট ক্লোন করুন。
closest() DOM ট্রির মধ্যে CSS চিহ্নিত সবচেয়ে কাছাকাছি এলিমেন্ট অনুসন্ধান করুন。
compareDocumentPosition() দুটি পত্রকে কি ডকুমেন্ট অবস্থান তুলনা করা
contains() নোড়টি নোড়ের পরিবারের পরবর্তীদের পরবর্তী নোড় হলে true ফেরত দাও
contentEditable পত্রটির কনটেন্ট সম্পাদনযোগ্য কি হবে তা সংযোজন করা বা তা ফেরত দাও
dir পত্রটির dir অ্যাট্রিবিউট মান সংযোজন করা বা তা ফেরত দাও
firstChild পত্রটির প্রথম সাব-নোড় ফেরত দাও
firstElementChild পত্রটির প্রথম সাব-নোড় ফেরত দাও
focus() পত্রটির ফোকাস লাভ করাই
getAttribute() পত্রটির অ্যাট্রিবিউটের মান ফেরত দাও
getAttributeNode() অ্যাট্রিবিউট নোড় ফেরত দাও
getBoundingClientRect() পত্রটির মাপ এবং দৃশ্যপটের সম্পর্কিত অবস্থান ফেরত দাও
getElementsByClassName() নির্দিষ্ট ক্লাস নামের সাব-নোড়দের সংকেতাংশ ফেরত দাও
getElementsByTagName() নির্দিষ্ট লেবেল নামের সাব-নোড়দের সংকেতাংশ ফেরত দাও
hasAttribute() নির্দিষ্ট অ্যাট্রিবিউট থাকলে true ফেরত দাও
hasAttributes() পত্রটির কোনও অ্যাট্রিবিউট থাকলে true ফেরত দাও
hasChildNodes() পত্রটির কোনও সাব-নোড় থাকলে true ফেরত দাও
element.id পত্রটির id অ্যাট্রিবিউট মান সংযোজন করা বা তা ফেরত দাও
innerHTML পত্রটির কনটেন্ট সংযোজন করা বা তা ফেরত দাও
innerText একটি নোড এবং তার পরবর্তী সন্তানদের টেক্সট কনটেন্টকে সেট করুন
insertAdjacentElement() পত্রের সম্পর্কিত অবস্থানে নতুন HTML পত্র সংযোজন করা
insertAdjacentHTML() পত্রের সম্পর্কিত অবস্থানে HTML ফরম্যাটকৃত টেক্সট সংযোজন করা
insertAdjacentText() পত্রের সম্পর্কিত অবস্থানে টেক্সট সংযোজন করা
insertBefore() সম্প্রতি সাব-নোড় আগে একটি নতুন সাব-নোড় সংযোজন করা
isContentEditable পত্রটির কনটেন্ট সম্পাদনযোগ্য হলে true ফেরত দাও
isDefaultNamespace() নির্দিষ্ট namespaceURI পূব্জ্ঞাপন প্রবাহী হলে true ফেরত দাও
isEqualNode() দুটি পত্রকে কি সমান করে পরীক্ষা করে
isSameNode() দুটি পত্রকে একই নোড় না হলে কি পরীক্ষা করে
isSupported() বর্জিত
lang পত্রটির lang অ্যাট্রিবিউট মান সংযোজন করা বা তা ফেরত দাও
lastChild পত্রটির শেষ সাব-নোড়
lastElementChild এলাকার শেষ সাবনোড় এলাকা ফিরিয়ে দেয়ন。
matches() যদি এলাকা দেওয়া CSS চিহ্নিতকারীর সাথে ম্যাচ করে, তবে true ফিরিয়ে দেয়ন。
namespaceURI নোড়ের নামস্পেস ইউআরআই ফিরিয়ে দেয়ন。
nextSibling একই নোড় ট্রি স্তরের পরবর্তী নোড় ফিরিয়ে দেয়ন。
nextElementSibling একই নোড় ট্রি স্তরের পরবর্তী এলাকা ফিরিয়ে দেয়ন。
nodeName নোড়ের নাম ফিরিয়ে দেয়ন。
nodeType নোড়ের নোড় ধরন ফিরিয়ে দেয়ন。
nodeValue নোড়ের মান সেট করুন বা ফিরিয়ে দেয়ন。
normalize() এলাকার মধ্যের সমগ্র টেক্সট নোড়গুলি মিলিয়ে ফিরিয়ে দেয়ন, এবং কোনও খালি টেক্সট নোড়কে সরিয়ে দিয়ন。
offsetHeight এলাকার প্রস্থতা ফিরিয়ে দেয়ন, যা সামগ্রীর প্রস্থতা সহ থাকে。
offsetWidth এলাকার প্রস্থতা ফিরিয়ে দেয়ন, যা সামগ্রীর প্রস্থতা সহ থাকে。
offsetLeft এলাকার প্রস্থতা ফিরিয়ে দেয়ন, যা সামগ্রীর প্রস্থতা সহ থাকে。
offsetParent এলাকার উচ্চতা ফিরিয়ে দেয়ন, যা সামগ্রীর উচ্চতা সহ থাকে。
offsetTop এলাকার উচ্চতা ফিরিয়ে দেয়ন, যা সামগ্রীর উচ্চতা সহ থাকে。
outerHTML এলাকার সামগ্রী (শুরু ট্যাগ এবং শেষ ট্যাগ সহ) সেট করুন বা ফিরিয়ে দেয়ন。
outerText নোড় এবং তার সমস্ত পরবর্তী নোড়গুলির বাইরের টেক্সট সামগ্রী সেট করুন বা ফিরিয়ে দেয়ন。
ownerDocument এলাকার মাত্রা ডকুমেন্ট (ডকুমেন্ট অবজেক্ট) ফিরিয়ে দেয়ন。
parentNode এলাকার মাত্রা নোড় ফিরিয়ে দেয়ন。
parentElement এলাকার মাত্রা নোড় ফিরিয়ে দেয়ন。
previousSibling একই নোড় ট্রি স্তরের আগের নোড় ফিরিয়ে দেয়ন。
previousElementSibling একই নোড় ট্রি স্তরের আগের এলাকা ফিরিয়ে দেয়ন。
querySelector() CSS চিহ্নিতকারী প্রথম সাবনোড় এলাকা ফিরিয়ে দেয়ন。
querySelectorAll() CSS চিহ্নিতকারী সমস্ত সাবনোড় এলাকা ফিরিয়ে দেয়ন。
remove() DOM থেকে এলাকা সরিয়ে দিয়ন。
removeAttribute() এলাকা থেকে অ্যাট্রিবিউটটি সরিয়ে দিয়ন。
removeAttributeNode() অ্যাট্রিবিউট নোড়টিকে সরিয়ে দিয়ে, সরিয়ে দেওয়া নোড়টি ফিরিয়ে দেয়ন。
removeChild() এলাকা থেকে সাবনোড় নোড়গুলি সরিয়ে দেয়ন。
removeEventListener() addEventListener() মধ্যে যুক্ত হওয়া ইভেন্ট হ্যান্ডলার মুক্ত করুন。
replaceChild() এলাকার মধ্যের সাবনোড় নোড়গুলি প্রতিস্থাপন করুন。
scrollHeight সমগ্র এলাকার উচ্চতা ফিরিয়ে দেয়, যা অভ্যন্তরীণ প্যাডিং সহ থাকে。
scrollIntoView() ইলেমেন্টকে ব্রাউজার উইন্ডোর দৃশ্যমান অঞ্চলে সরণ করান
scrollLeft ইলেমেন্টের কনটেন্টের হোরিজন্টাল সরণ পিক্সেল সংখ্যা সেট করুন বা ফিরিয়ে দিন
scrollTop ইলেমেন্টের কনটেন্টের সাপাতলা সরণ পিক্সেল সংখ্যা সেট করুন বা ফিরিয়ে দিন
scrollWidth ইলেমেন্টের মোট প্রস্থত্ব, ইন্টারভেলস্‌ সহ, ফিরিয়ে দিন
setAttribute() এটা একটি পদ্ধতি যা অ্যাট্রিবিউটের মানকে সেট করে বা পরিবর্তন করে
setAttributeNode() এটা একটি পদ্ধতি যা অ্যাট্রিবিউট নোডকে সেট করে বা পরিবর্তন করে
style ইলেমেন্টের style এবং প্রতিনিধিত্ব করুন
tabIndex ইলেমেন্টের tabIndex এবং প্রতিনিধিত্ব করুন
tagName ইলেমেন্টের ট্যাগ নাম ফিরিয়ে দিন
textContent একটি নোড এবং তার পরবর্তী সন্তানদের টেক্সট কনটেন্টকে সেট করুন
title ইলেমেন্টের title এবং প্রতিনিধিত্ব করুন
toString() ইলেমেন্টকে স্ট্রিং হিসাবে রূপান্তর করুন

Element ইন্টারফেস বিবরণ

Element ইন্টারফেস HTML ইলেমেন্ট, XML ইলেমেন্ট বা ট্যাগকে প্রতিনিধিত্ব করে।tagName এটা ইলেমেন্টের নাম নির্ধারণ করে।Document এর documentElement এটা এই ডকুমেন্টের প্রধান Element ওবজেক্ট এর উপর উল্লেখ করে।HTMLDocument ওবজেক্টের body এটা সমানভাবে, এটা ডকুমেন্টের <body> ইলেমেন্টকে উল্লেখ করে।একটি HTML ডকুমেন্টের একটি নির্দিষ্ট নামভুক্ত ইলেমেন্ট খুঁজে বের করতে, Document.getElementById() (এবং এই ইলেমেন্টকে id এবং একটি অভিন্ন নাম দিয়ে) ব্যবহার করা হয়।ইলেমেন্টের নাম দ্বারা ইলেমেন্টকে চিহ্নিত করতে, getElementsByTagName() ব্যবহার করা হয়, এটা ইলেমেন্টেরও এবং Document-এরও একটি পদ্ধতি।HTML ডকুমেন্টে, HTMLDocument.getElementsByName() পদ্ধতিকেও ব্যবহার করা যায়, এটা ইলেমেন্টের name এবং একটি নাম দিয়ে ইলেমেন্টকে খুঁজে বের করতে এই পদ্ধতি ব্যবহৃত হয়।শেষত, Document.createElement() পদ্ধতিকে ব্যবহার করে, ডকুমেন্টে একটি নতুন Element ইলেমেন্ট তৈরি করা যায়。

addEventListener() মথদা (এবং আইই এর জন্য প্রতিস্থাপক attachEvent() ) একটি পদ্ধতি যা বিশেষ ঘটনার জন্য ইভেন্ট হ্যান্ডলার ফাংশন রেজিস্ট্রার করার জন্য সহায়তা করে।প্রযুক্তিগতভাবে, addEventListener() , removeEventListener() এবং dispatchEvent() 2 তম ডম ইভেন্টস্‌ স্পেসিফিকেশনের EventTarget ইন্টারফেস দ্বারা নির্ধারিত।সব ইলেমেন্ট ওবজেক্টসই EventTarget কে রূপায়িত করে।

এই ইন্টারফেসের অন্যান্য পদ্ধতিগুলি এলিমেন্টের অ্যাট্রিবিউটকে পরিদর্শন করার জন্য প্রদান করে। HTML ডকুমেন্টে (এবং অনেক অ্যাক্সেসযোগ্য XML ডকুমেন্টে), সমস্ত অ্যাট্রিবিউটগুলি সহজ স্ট্রিং মূল্যসম্পন্ন এবং আপনি getAttribute() এবং setAttribute() মথডগুলি ব্যবহার করে কোনও অ্যাট্রিবিউট অপারেশন করতে পারেন।

আপনি XML ডকুমেন্ট ব্যবহার করছেন তবে, তা প্রত্যক্ষভাবে Entity রেফারেন্স পৃষ্ঠা হিসাবে অ্যাট্রিবিউট মূল্যের অংশ হতে পারে, আপনি অ্যাট্রিবিউট ওবজেক্ট এবং তার নোড ট্রি ব্যবহার করতে হবে। একটি অ্যাট্রিবিউটের জন্য getAttributeNode() এবং setAttributeNode() ব্যবহার করে অ্যাট্রিবিউট ওবজেক্ট পাওয়া ও সেট করতে পারেন বা Node ইন্টারফেসের attributes[] অ্যারেক্স ব্যবহার করে Attr নোডগুলি ব্যবহার করতে পারেন। আপনি XML নাম স্পেস ব্যবহারকারী XML ডকুমেন্ট ব্যবহার করছেন তবে, "NS"-সহ বিভিন্ন পদ্ধতি ব্যবহার করতে হবে。

1 শ্রেণীর DOM নিয়মনীতিতে, normalize() মথড হল Element ইন্টারফেসের একটি অংশ। 2 শ্রেণীর নিয়মনীতিতে, normalize() হল Node ইন্টারফেসের একটি অংশ। সমস্ত Element নোডগুলি এই মথডকে উত্তরসূরী করে এবং এটা করতে পারে。

জ্ঞানবিষয়: HTML DOM নোড

এইচটিএমএল ডকুমেন্ট অবজেক্ট মডেল (এইচটিএমএল DOM) এ, প্রত্যেক অংশই একটি নোড:

  • ডকুমেন্টটি এমনভাবে ডকুমেন্ট নোড
  • সমস্ত এইচটিএমএল এলিমেন্টগুলি হল এলিমেন্ট নোড
  • সমস্ত এইচটিএমএল অ্যাট্রিবিউটগুলি হল অ্যাট্রিবিউট নোড
  • এইচটিএমএল এলিমেন্টের মধ্যের টেক্সট হল টেক্সট নোড
  • কমেন্টগুলি হল কমেন্ট নোড

Element অবজেক্ট

এইচটিএমএল ডকুমেন্ট এমনভাবে Element অবজেক্ট প্রতিনিধিত্ব করে。

Element অবজেক্টগুলি এলিমেন্ট নোড, টেক্সট নোড, কমেন্ট নোড-এর উপ-নোড সম্পন্ন হতে পারে。

NodeList অবজেক্ট নোড তালিকা প্রতিনিধিত্ব করে, যেমন HTML এলিমেন্টের সাব-নোড কলেকশন。

এলিমেন্টগুলিও অ্যাট্রিবিউট সম্পন্ন হতে পারে। অ্যাট্রিবিউটগুলি হল অ্যাট্রিবিউট নোড (আগামী অধ্যায়ে দেখুন)。