এইচটিএমএল ডোম এলিমেন্ট অবজেক্ট
এইচটিএমএল ডোম নোড
এইচটিএমএল ডোম(Document Object Model) এর মধ্যে সবকিছুই একটি নোড
- ডকুমেন্ট নিজেই একটি ডকুমেন্ট নোড
- সকল এইচটিএমএল এলিমেন্ট হলো এলিমেন্ট নোড
- সকল এইচটিএমএল এট্রিবিউট হলো এট্রিবিউট নোড
- এইচটিএমএল এলিমেন্টের ভিতরে টেক্সট হলো টেক্সট নোড
- কমেন্টগুলো হলো কমেন্ট নোড
এলিমেন্ট অবজেক্ট
এইচটিএমএল ডোম-এ এলিমেন্ট অবজেক্ট একটি এইচটিএমএল এলিমেন্টকে প্রতিনিধিত্ব করে।
এলিমেন্ট অবজেক্টে এলিমেন্ট নোড, টেক্সট নোড অথবা কমেন্ট নোড এর চাইল্ড নোড থাকতে পারে ।
একটি NodeList অবজেক্ট একটি এইচটিএমএল এলিমেন্টের চাইল্ড নোডের সংগ্রহের মত নোড-এর একটি লিস্ট প্রতিনিধিত্ব করে। ।
এলিমেন্ট গুলোর এট্রিবিউট থাকতে পারে। এট্রিবিউট গুলো হলো এট্রিবিউট নোড।
ব্রাউজার সাপোর্ট
| অবজেক্ট | |||||
|---|---|---|---|---|---|
| এলিমেন্ট | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
| NodeList | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
এলিমেন্ট অবজেক্ট এবং NodeList অবজেক্ট বহুল ব্যবহৃত সকল ব্রাউজারে সাপোর্ট করে।
প্রোপার্টি এবং মেথড
নিচের প্রোপার্টি এবং মেথডগুলো কে এইচটিএমএল এর সকল এলিমেন্টে ব্যবহার করা যায়
| প্রোপার্টি/মেথড | বর্ণনা |
|---|---|
| element.accessKey | একটি এলিমেন্টের accesskey এট্রিবিউট সেট অথবা রিটার্ন করে। |
| element.addEventListener() | নির্দিষ্ট এলিমেন্টে event handler সংযুক্ত করে। |
| element.appendChild() | শেষ চাইল্ড নোড হিসেবে এলিমেন্টে একটি নতুন চাইল্ড নোড যুক্ত করে। |
| element.attributes | একটি এলিমেন্টের এট্রিবিউটে NamedNodeMap রিটার্ন করে। |
| element.blur() | এলিমেন্টের উপর থেকে ফোকাস অপসারণ করে। |
| element.childElementCount | একটি এলিমেন্টে যতগুলো চাইল্ড এলিমেন্ট আছে তার সংখ্যা দেখায় |
| element.childNodes | একটি এলিমেন্টের ( টেক্সট এবং কমেন্ট নোড সহ ) কয়েকটি চাইল্ড নোড রিটার্ণ করে। |
| element.children | একটি এলিমেন্টের ( টেক্সট এবং কমেন্ট নোড ব্যতিত ) কয়েকটি চাইল্ড নোড রিটার্ণ করে। । |
| element.classList | একটি এলিমেন্টের class name রিটার্ন করে। |
| element.className | একটি এলিমেন্টের class এট্রিবিউটের ভ্যালু সেট করে। । |
| element.click() | এলিমেন্টের উপর mouse-click বুঝায় |
| element.clientHeight | প্যাডিং সহ একটি এলিমেন্টের height রিটার্ণ করে। |
| element.clientLeft | একটি এলিমেন্টের বাম বর্ডারের width রিটার্ণ করে। |
| element.clientTop | একটি এলিমেন্টের উপরের বর্ডারের width রিটার্ণ করে। |
| element.clientWidth | প্যাডিং সহ একটি এলিমেন্টের height কে রিটার্ণ করে। |
| element.cloneNode() | একটি এলিমেন্টকে ক্লোন করে। |
| element.compareDocumentPosition() | দু'টি এলিমেন্টের ডকুমেন্টের পজিশন তুলনা করে। |
| element.contains() | একটি নোড যদি অন্য আরেকটি নোড থেকে আসে তবে সত্য দেখাবে। অন্যথায় মিথ্যা রিটার্ন করে। |
| element.contentEditable | একটি এলিমেন্টের কন্টেন্টকে এডিট করা যাবে কিনা সেট অথবা রিটার্ণ করে। |
| element.dir | একটি এলিমেন্টের dir এট্রিবিউটের ভ্যালুকে সেট অথবা রিটার্ণ করে। |
| element.firstChild | একটি এলিমন্টের প্রথম চাইল্ড নোড কে রিটার্ণ করে। |
| element.firstElementChild | একটি এলিমন্টের প্রথম চাইল্ড এলিমেন্ট কে রিটার্ণ করে। |
| element.focus() | একটি এলিমেন্টের উপর ফোকাস করে। |
| element.getAttribute() | একটি নোড এলিমেন্টের নির্দিষ্ট এট্রিবিউটের ভ্যালু কে রিটার্ণ করে। |
| element.getAttributeNode() | নির্দিষ্ট নোড এট্রিবিউটকে রিটার্ণ করে। |
| element.getElementsByClassName() | নির্দিষ্ট class name দিয়ে সকল চাইল্ড এলিমেন্টের সংগ্রহ রিটার্ন করে। |
| element.getElementsByTagName() | নির্দিষ্ট tag name দিয়ে সকল চাইল্ড এলিমেন্টের সংগ্রহ রিটার্ন করে। |
| element.hasAttribute() | একটি এলিমেন্টের যদি নির্দিষ্ট এট্রিবিউট থাকে তাহলে সত্য দেখাবে। অন্যথায় মিথ্যা দেখাবে। |
| element.hasAttributes() | একটি এলিমেন্টের যদি কোনো এট্রিবিউট থাকে তাহলে সত্য দেখাবে। অন্যথায় মিথ্যা দেখাবে। |
| element.hasChildNodes() | একটি এলিমেন্টের যদি কোন চাইল্ড node থাকে তাহলে সত্য দেখাবে। অন্যথায় মিথ্যা দেখাবে। |
| element.id | একটি এলিমেন্টের id এট্রিবিউটের ভ্যালুকে সেট করে। |
| element.innerHTML | একটি এলিমেন্টের কন্টেন্টকে সেট করে। |
| element.isContentEditable | এলিমেন্টের কন্টেন্ট যদি এডিট(Edit) করার যোগ্য হয় তবে সত্য দেখাবে। অন্যথায় মিথ্যা দেখাবে। |
| element.isDefaultNamespace() | নির্দিষ্ট namespaceURI যদি ডিফল্ট হয় তবে সত্য দেখাবে। অন্যথায় মিথ্যা দেখাবে। |
| element.isEqualNode() | দু'টি এলিমেন্ট সমান কিনা তা যাচাই করে। |
| element.isSameNode() | দু'টি এলিমেন্ট একই node কিনা তা যাচাই করে। |
| element.isSupported() | একটি এলিমেন্টে নির্দিষ্ট feature যদি সাপোর্ট করে। তবে সত্য দেখাবে। অন্যথায় মিথ্যা দেখাবে। |
| element.lang | একটি এলিমেন্টের lang এট্রিবিউটের ভ্যালু সেট অথবা রিটার্ন করে। । |
| element.lastChild | একটি এলিমেন্টের শেষ চাইল্ড নোড রিটার্ন করে। |
| element.lastElementChild | একটি এলিমেন্টের শেষ চাইল্ড এলিমেন্ট কে রিটার্ণ করে। |
| element.namespaceURI | একটি এলিমেন্টের namespace URI কে রিটার্ণ করে। |
| element.nextSibling | একই নোড ট্রি লেভেলের পরবর্তী নোড রিটার্ণ করে। |
| element.nextElementSibling | একই নোড ট্রি লেভেলের পরবর্তী এলিমেন্ট রিটার্ণ করে। |
| element.nodeName | একটি নোড এর নামকে রিটার্ণ করে। |
| element.nodeType | একটি নোড এর টাইপ রিটার্ণ করে। |
| element.nodeValue | একটি নোড এর ভ্যালু রিটার্ণ করে। |
| element.normalize() | একটি এলিমেন্ট থেকে সংলগ্ন টেক্সট নোড যুক্ত করে এবং খালি(empty) টেক্সট নোড অপসারন করে। |
| element.offsetHeight | প্যাডিং, বর্ডার, স্কলবার সহ একটি এলিমেন্টের height কে রিটার্ণ করে। |
| element.offsetWidth | প্যাডিং, বর্ডার, স্কলবার সহ একটি এলিমেন্টের Width কে রিটার্ণ করে। |
| element.offsetLeft | একটি এলিমেণ্টের অনুভূমিক অফসেট অবস্থান রিটার্ণ করে। |
| element.offsetParent | একটি এলিমেন্টের অফসেট কন্টেইনার রিটার্ণ করে। |
| element.offsetTop | একটি এলিমেণ্টের উলম্ব অফসেট অবস্থান রিটার্ণ করে। |
| element.ownerDocument | একটি এলিমেন্টের রূট এলিমেন্টকে রিটার্ণ করে। |
| element.parentNode | একটি এলিমেন্টের প্যারেন্ট এলিমেন্টকে রিটার্ণ করে। |
| element.parentElement | একটি এলিমেন্টের প্যারেন্ট নোড এলিমেন্টকে রিটার্ণ করে। |
| element.previousSibling | একই নোড লেভেলের পূর্ববর্তী নোড কে রিটার্ণ করে। |
| element.previousElementSibling | একই নোড লেভেলের পূর্ববর্তী এলিমেন্ট কে রিটার্ণ করে। |
| element.querySelector() | একটি এলিমেন্টের প্রথম চাইল্ড এলিমেন্টকে বুঝায় যেটি একটি নির্দিষ্ট সিএসএস সিলেক্টরের সাথে মিলে যায়। |
| element.querySelectorAll() | একটি এলিমেন্টের সকল চাইল্ড এলিমেন্টকে বুঝায় যেটি একটি নির্দিষ্ট সিএসএস সিলেক্টরের সাথে মিলে যায়। |
| element.removeAttribute() | একটি এলিমেন্ট থেকে নির্দিষ্ট এট্রিবিউটকে অপসারন করে। |
| element.removeChild() | একটি এলিমেন্ট থেকে চাইল্ড নোড কে অপসারন করে। |
| element.replaceChild() | চাইল্ড নোড কে একটি এলিমেন্টের মধ্যে প্রতিস্থাপন করে। |
| element.removeEventListener() | addEventListener() মেথডের সাথে যুক্ত করা হয়েছে এমন event handler অপসারন করে। |
| element.scrollHeight | প্যাডিং সহ একটি এলিমেন্টের সম্পূর্ণ height কে রিটার্ণ করে। |
| element.scrollLeft | একটি এলিমেন্টের কন্টেন্টকে অনুভূমিক ভাবে স্ক্রল করার জন্য পিক্সেল(px) সেট করে। |
| element.scrollTop | একটি এলিমেন্টের কন্টেন্টকে উলম্বভাবে স্ক্রল করার জন্য পিক্সেল(px) সেট করে। |
| element.scrollWidth | প্যাডিং সহ একটি এলিমেন্টের সম্পূর্ণ Width কে রিটার্ণ করে। |
| element.setAttribute() | নির্দিষ্ট এট্রিবিউটের নির্দিষ্ট ভ্যালুকে সেট অথবা পরিবর্তন করে। |
| element.setAttributeNode() | নির্দিষ্ট নোড এট্রিবিউট সেট অথবা পরিবর্তন করে। |
| element.style | একটি এলিমেন্টের স্টাইল এট্রিবিউটের ভ্যালু সেট অথবা রিটার্ন করে। |
| element.tabIndex | একটি এলিমেন্টের tabindex এট্রিবিউটের ভ্যালু সেট অথবা রিটার্ন করে। |
| element.tagName | একটি এলিমেন্টের ট্যাগের নাম সেট করে। |
| element.title | একটি এলিমেন্টের টাইটেল এট্রিবিউটের ভ্যালুকে সেট করে। |
| element.toString() | একটি এলিমেন্টকে স্টিং এ কনভার্ট করা |
| nodelist.item() | একটি NodeList এর মধ্যে নির্দিষ্ট ইন্ডেক্সের নোড রিটার্ণ করে। |
| nodelist.length | একটি NodeList এর মধ্যে নোড এর সংখ্যা রিটার্ণ করে। |