JS - Element Document Object
Element Document Object ये HTML Element का वर्णन करता है |
Javascript में Elements पर attributes की लेन-देन की जाती है | जैसे Element पर attribute को set, get या change करना हो, किसी Element का child Element/Node जानना हो
इसके लिए Javascript में Element Object के लिए कुछ properties और methods दी गयी है |
अगर HTML Document से Elements को access करना हो तो कुछ Document Object के methods को जानना जरुरी होता है, जैसे
id के जरिये Element को access करना हो तो getElementById() method का इस्तेमाल किया जाता है |
class name के जरिये Element को access करना हो तो getElementsByClassName()[] method का इस्तेमाल किया जाता है |
name के जरिये Element को access करना हो तो getElementsByName()[] method का इस्तेमाल किया जाता है |
Tag name के जरिये Element को access करना हो तो getElementsByTagName()[] method का इस्तेमाल किया जाता है |
Element Document Object Properties
| Properties | Description |
|---|---|
| accessKey | element पर accesskey attribute set, change या return किया जाता है | |
| attributes | Element का NamedNodeMap Object return करता है जिसमे Element/Node के सभी attributes मौजूद होते है | |
| childElementCount | दिए गए element के child elements को count किया जाता है | |
| childNodes | arent node के child nodes Nodelist object में return किये जाते है | |
| children | parent element के child element collection; HTMLCollection object में return किये जाते है | |
| classList | class name(s) DOMTokenList के रूप में return किये जाते है | |
| className | lass name(s) DOMTokenList के रूप में return किये जाते है | |
| clientHeight | Element की height को padding के साथ पर border और margin को छोडके pixel में return किया जाता है | |
| clientLeft | Element की left border की width; pixels में return की जाती है | |
| clientTop | Element की top border की width; pixels में return की जाती है | |
| clientWidth | Element की width को padding के साथ पर border और margin को छोडके pixel में return किया जाता है | |
| dir | Element की dir attribute की value return की जाती है | |
| firstChild | Element की पहली child node को return किया जाता है | |
| firstElementChild | Element के text/whitespace/newline और comment node को छोडके पहले child element return करता है | |
| id | Element के id को return या set करता है | |
| innerHTML | Webpage content dynamically change, set या return किया जाता है | |
| lastChild | Element की आखिरी child node को return किया जाता है | |
| lastElementChild | Element के text/whitespace/newline और comment node को छोडके आखिरी child element return करता है | |
| nextElementSibling | Element के अगले sibling Element को return किया जाता है | |
| nextSibling | Element के अगले sibling node; element के रूप में return किया जाता है | |
| nodeName | node का name uppercase में return करता है | |
| nodeType | node का type; number में return करता है | |
| nodeValue | node की value return की जाती है | |
| offsetHeight | padding और border के साथ height; pixel में return की जाती है | |
| offsetLeft | Element की left position; pixel में return किया जाता है | |
| offsetTop | Element की top position; pixel में return किया जाता है | |
| offsetWidth | padding और border के साथ width pixel मेंreturn की जाती है | |
| parentElement | Element का parent Element में return किया जाता है | |
| parentNode | Element का parent node Object में return किया जाता है | |
| previousElementSibling | Element के पिछले sibling Element को return किया जाता है | |
| previousSibling | Element के पिछले sibling node; element के रूप में return किया जाता है | |
| scrollHeight | border और scrollbar के बिना और padding के साथ पूरे element की height; pixel में return की जाती है | |
| scrollLeft | Element का content left की ओर से scroll करने के लिए return या pixels में set किये जाते है | |
| scrollTop | Element का content top की ओर से scroll करने के लिए return या pixels में set किये जाते है | |
| scrollWidth | border और scrollbar के बिना और padding के साथ पूरे element की width; pixel में return की जाती है | |
| style | Element के style(inline css) attribute पर css property को set या return किया जाता है | |
| tabIndex | Element के tabIndex इस attribute की value set या return की जाती है | |
| tagName | Element का tag Name Uppercase में return करता है | |
| textContent | Element का text content return या set करता है | |
| title | Element का title attribute को set या return किया जाता है | |
Element Document Object Methods
| Methods | Description |
|---|---|
| addEventListener() | Event Handler को दिए हुए Element से जोड़ा जाता है | |
| appendChild() | parent node के child list के end या childNode के end पर node को append किया जाता है | |
| blur() | Element पर जो focus होता है उसे remove किया जाता है | |
| click() | Element पर mouseClick के बराबर होता है | |
| cloneNode() | node को copy किया जाता है | |
| contains() | Element में node है या नहीं ये boolean value में return किया जाता है | |
| focus() | Element पर focus किया जाता है | |
| getAttribute() | Element के attribute की value return की जाती है | |
| getAttributeNode() | Element के attribute node को Attr Object के रूप में return किया जाता है | |
| getElementsByClassName() | एक ही class के element के collection को return किया जाता है | |
| getElementsByTagName() | एक ही Tag Name के element के collection को return किया जाता है | |
| hasAttribute() | Element पर attribute है या नहीं ये boolean value में return किया जाता है | |
| hasAttributes() | Element पर attribute है या नहीं ये boolean value में return किया जाता है | |
| hasChildNodes() | Element के child Node(s)/element(s) है या नहीं ये boolean value में return किया जाता है | |
| insertBefore() | Element पर उसका एक नया child node create करके दिए हुए existingNode node से पहले उसे insert किया जाता है | |
| isEqualNode() | दिया हुआ node/element और दूसरा node एक जैसे है या नहीं ये boolean value में check किया जाता है | |
| isSameNode() | node/element और वही node एक जैसे है या नहीं ये boolean value में check किया जाता है | |
| querySelector() | दिए गए css selector के साथ match करके element से पहले child element को return किया जाता है | |
| querySelectorAll() | css selector के साथ match करके element से सभी child element को Nodelist object के रूप में return किया जाता है | |
| removeAttribute() | Element पर attribute को remove किया जाता है | |
| removeChild() | Element का child node/element remove किया जाता है और remove किये node को Object में return करता है | |
| removeAttributeNode() | Element पर attribute को remove किया जाता है और remove हुए attribute को Attr Object के रूप में return किया जाता है | |
| removeEventListener() | Element में addEventListener() method से जोड़े गए Event Handler को remove किया जाता है | |
| replaceChild() | Element के old node या existing node को new node से replace किया जाता है | |
| setAttribute() | Element पर attribute और उनकी value set की जाती है | |