एचटीएमएल डॉम एलीमेंट ऑब्जैक्ट

Element ऑब्जैक्ट

HTML DOM में, Element ऑब्जैक्ट HTML एलीमेंट का प्रतिनिधित्व करता है, जैसे P, DIV, A, TABLE या किसी अन्य HTML एलीमेंट।

एट्रिब्यूट और विधियाँ

निम्नलिखित एट्रिब्यूट और विधियों को सभी HTML एलीमेंटों के लिए उपयोग किया जा सकता है:

एट्रिब्यूट / विधि वर्णन
accessKey एलीमेंट के accesskey एट्रिब्यूट का सेट करें या वापस करें।
addEventListener() एलीमेंट पर इवेंट हैंडलर को जोड़ें।
appendChild() नए उप-एलीमेंट को एलीमेंट में जोड़ें (एटैच करें)।
attributes एलीमेंट के एट्रिब्यूट्स का NamedNodeMap वापस करें।
blur() एलीमेंट से फोकस हटाएं।
childElementCount एलीमेंट के उप-एलीमेंट की संख्या को वापस करें।
childNodes एलीमेंट के उप-एलीमेंट का NodeList वापस करें।
children एलीमेंट के उप-एलीमेंट का HTMLCollection वापस करें।
classList एलीमेंट के क्लास नाम को वापस करें।
className एलीमेंट के class एट्रिब्यूट का सेट करें या वापस करें।
click() एलीमेंट पर माउस क्लिक करने का मॉडलिंग करें।
clientHeight एलीमेंट की ऊंचाई को वापस करें जिसमें इनर पैडिंग शामिल हैं।
clientLeft एलीमेंट के बाईं बॉर्डर की चौड़ाई को वापस करें।
clientTop एलीमेंट के ऊपरी बॉर्डर की चौड़ाई को वापस करें।
clientWidth एलीमेंट की चौड़ाई को वापस करें जिसमें इनर पैडिंग शामिल हैं।
cloneNode() एलीमेंट का क्लोन करें।
closest() डॉम ट्री में 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() डॉम से एलिमेंट हटाएं।
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() विधि (और विशेषतः IE के लिए विकल्प attachEvent() ) इस एलिमेंट पर विशेष प्रकार के इवेंट के लिए इवेंट हैंडलर फ़ंक्शन रजिस्टर करने का तरीका प्रदान करती है। तकनीकी रूप से, addEventListener() , removeEventListener() और dispatchEvent() दोवें DOM Events नियम के EventTarget इंटरफेस द्वारा परिभाषित हैं। सभी Element ऑब्जेक्ट इसका इंटरफेस कार्य करते हैं।

इस इंटरफेस के अन्य विधियों से एलिमेंट के अट्रिब्यूट की पहुँच मिलती है। एचटीएमएल डॉक्यूमेंट में (और कई XML डॉक्यूमेंट में), सभी अट्रिब्यूट सरल इन्टरनेट वाल्यूज हैं और आप getAttribute() और setAttribute() के सरल विधियों का उपयोग कर सकते हैं।

यदि आप XML डॉक्यूमेंट का उपयोग कर रहे हैं, तो यह Entity रेफरेंस पृष्ठ को अट्रिब्यूट के हिस्से के रूप में शामिल कर सकता है, आपको Attr ऑब्जैक्ट और इसके नोड के उपनिवेश का उपयोग करना होगा। आप एक अट्रिब्यूट के लिए getAttributeNode() और setAttributeNode() का उपयोग कर सकते हैं या Node इंटरफेस के attributes[] अर्रे में Attr नोड का अनुवाद कर सकते हैं। यदि आप एक XML डॉक्यूमेंट का उपयोग करते हैं जो XML नामस्पेस का उपयोग करता है, तो 'NS' नाम वाले विभिन्न विधियों का उपयोग करना होगा।

1 वाधी डॉम नियम में, normalize() विधि Element इंटरफेस का एक हिस्सा है। 2 वाधी नियम में, normalize() नोड इंटरफेस का एक हिस्सा है। सभी Element नोड इस विधि को विरासत करते हैं और इसे अभी भी उपयोग कर सकते हैं।

ज्ञान क्षेत्र: एचटीएमएल डॉम नोड

एचटीएमएल डॉम (डॉक्यूमेंट ऑब्जैक्ट मॉडल) में, हर भाग नोड हैः

  • डॉक्यूमेंट स्वयं डॉक्यूमेंट नोड है
  • सभी एचटीएमएल एलिमेंट एलिमेंट नोड है
  • सभी एचटीएमएल अट्रिब्यूट अट्रिब्यूट नोड है
  • एचटीएमएल एलिमेंट के भीतर का टेक्स्ट टेक्स्ट नोड है
  • कमेंट कमेंट नोड है

Element ऑब्जैक्ट

एचटीएमएल डॉम (डॉक्यूमेंट ऑब्जैक्ट मॉडल) में, Element ऑब्जैक्ट एचटीएमएल एलिमेंट को प्रतिनिधित्व करता है।

Element ऑब्जैक्ट एलिमेंट नोड, टेक्स्ट नोड, कमेंट नोड के सब-नोड का प्रयोग कर सकता है।

NodeList ऑब्जैक्ट नोड लिस्ट को प्रतिनिधित्व करता है, जैसे एचटीएमएल एलिमेंट के सब-नोड सेट।

एलिमेंट भी अट्रिब्यूट रख सकते हैं। अट्रिब्यूट अट्रिब्यूट नोड (अगले अनुच्छेद देखें) हैं।