डाउनलोड पी.डी.एफ. ई-बुक्स
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

PropertiesDescription
accessKeyelement पर accesskey attribute set, change या return किया जाता है |
attributesElement का NamedNodeMap Object return करता है जिसमे Element/Node के सभी attributes मौजूद होते है |
childElementCountदिए गए element के child elements को count किया जाता है |
childNodesarent node के child nodes Nodelist object में return किये जाते है |
childrenparent element के child element collection; HTMLCollection object में return किये जाते है |
classListclass name(s) DOMTokenList के रूप में return किये जाते है |
classNamelass name(s) DOMTokenList के रूप में return किये जाते है |
clientHeightElement की height को padding के साथ पर border और margin को छोडके pixel में return किया जाता है |
clientLeftElement की left border की width; pixels में return की जाती है |
clientTop Element की top border की width; pixels में return की जाती है |
clientWidthElement की width को padding के साथ पर border और margin को छोडके pixel में return किया जाता है |
dirElement की dir attribute की value return की जाती है |
firstChildElement की पहली child node को return किया जाता है |
firstElementChildElement के text/whitespace/newline और comment node को छोडके पहले child element return करता है |
idElement के id को return या set करता है |
innerHTMLWebpage content dynamically change, set या return किया जाता है |
lastChildElement की आखिरी child node को return किया जाता है |
lastElementChildElement के text/whitespace/newline और comment node को छोडके आखिरी child element return करता है |
nextElementSiblingElement के अगले sibling Element को return किया जाता है |
nextSiblingElement के अगले sibling node; element के रूप में return किया जाता है |
nodeNamenode का name uppercase में return करता है |
nodeTypenode का type; number में return करता है |
nodeValuenode की value return की जाती है |
offsetHeightpadding और border के साथ height; pixel में return की जाती है |
offsetLeftElement की left position; pixel में return किया जाता है |
offsetTopElement की top position; pixel में return किया जाता है |
offsetWidthpadding और border के साथ width pixel मेंreturn की जाती है |
parentElementElement का parent Element में return किया जाता है |
parentNodeElement का parent node Object में return किया जाता है |
previousElementSiblingElement के पिछले sibling Element को return किया जाता है |
previousSiblingElement के पिछले sibling node; element के रूप में return किया जाता है |
scrollHeightborder और scrollbar के बिना और padding के साथ पूरे element की height; pixel में return की जाती है |
scrollLeftElement का content left की ओर से scroll करने के लिए return या pixels में set किये जाते है |
scrollTopElement का content top की ओर से scroll करने के लिए return या pixels में set किये जाते है |
scrollWidthborder और scrollbar के बिना और padding के साथ पूरे element की width; pixel में return की जाती है |
styleElement के style(inline css) attribute पर css property को set या return किया जाता है |
tabIndexElement के tabIndex इस attribute की value set या return की जाती है |
tagNameElement का tag Name Uppercase में return करता है |
textContentElement का text content return या set करता है |
titleElement का title attribute को set या return किया जाता है |

Element Document Object Methods

MethodsDescription
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 की जाती है |