PGDCA, BCA, B-Tech, MCA, M-Tech, B.Sc computer science राजस्थान सूचना सहायक व कंप्यूटर शिक्षक विशेष नोट्स: इस अध्याय में हम JavaScript DOM: Document Object Model Hierarchy and Nodes (DOM (Document Object Model): ट्री संरचना, नोड्स और एलिमेंट्स) की संपूर्ण थ्योरी, मुख्य तकनीकी बिंदु, तुलनात्मक तालिका और विगत परीक्षाओं के पैटर्न पर आधारित 20 अति-महत्वपूर्ण बहुविकल्पीय प्रश्न (MCQs) विस्तृत हिंदी व अंग्रेजी व्याख्या सहित पढ़ेंगे।
Overview: The Document Object Model (DOM) represents an HTML or XML document as a live in-memory tree of nodes where elements, attributes, and text can be inspected or modified via JavaScript.
अध्याय सार: DOM (Document Object Model) वेब पेज के HTML दस्तावेज़ को मेमोरी में एक ट्री संरचना (Tree Structure) के रूप में दर्शाता है, जिससे JavaScript प्रत्येक टैग, टेक्स्ट और एट्रिब्यूट को डायनामिक रूप से बदल सकता है।
JavaScript DOM: Document Object Model Hierarchy and Nodes: Detailed Notes & Architecture (DOM (Document Object Model): ट्री संरचना, नोड्स और एलिमेंट्स)
1. DOM Tree Root & Node Hierarchy (DOM ट्री रूट एवं नोड पदानुक्रम)
[EN] Every browser creates a global document object at the top of the DOM tree whenever a web page finishes parsing HTML. The document object owns document.documentElement (the <html> root), which branches into <head> and <body> parent nodes, forming parent, child, and sibling relationships across every tag in the page.
[HI] ब्राउज़र HTML को पार्स करते ही मेमोरी में शीर्ष पर document ऑब्जेक्ट बनाता है। इसके नीचे document.documentElement (<html> रूट) होता है जो <head> और <body> में बंटता है, जिससे पैरेंट, चाइल्ड और सिबलिंग संबंध बनते हैं।
2. Core DOM Node Types (nodeType Constants) (प्रमुख DOM नोड प्रकार (nodeType मान))
[EN] According to the W3C DOM specification, every part of a webpage is classified by an integer nodeType property: Element nodes (tags like <div>, <p>) have nodeType 1, Attribute nodes have nodeType 2 (deprecated in DOM4), Text nodes (actual content or whitespace) have nodeType 3, Comment nodes have nodeType 8, and the Document node itself has nodeType 9.
[HI] W3C मानक के अनुसार हर DOM हिस्से का एक संख्यात्मक nodeType होता है: Element नोड (HTML टैग) के लिए 1, Text नोड के लिए 3, Comment नोड के लिए 8 और मुख्य Document नोड के लिए 9 निर्धारित है।
3. NodeList vs HTMLCollection Traversal (NodeList बनाम HTMLCollection ट्रावर्सल)
[EN] Properties like childNodes, firstChild, and nextSibling traverse ALL node types including whitespace text nodes and HTML comments. By contrast, element-only properties such as children, firstElementChild, lastElementChild, and nextElementSibling skip text and comment nodes and return only HTML elements in a live HTMLCollection.
[HI] childNodes, firstChild और nextSibling सभी नोड्स (व्हाइटस्पेस टेक्स्ट व कमेंट सहित) को गिनते हैं, जबकि children, firstElementChild और nextElementSibling केवल HTML एलिमेंट्स पर ही काम करते हैं।
4. parentNode vs parentElement & Tree Mutation (parentNode बनाम parentElement अंतर)
[EN] Nearly every HTML element shares the same parentNode and parentElement, except the root <html> element: document.documentElement.parentNode returns the Document object (nodeType 9), whereas document.documentElement.parentElement evaluates to null because the Document node is not an Element.
[HI] लगभग सभी टैग्स के लिए parentNode और parentElement समान होते हैं, लेकिन रूट <html> के लिए parentNode document ऑब्जेक्ट लौटाता है जबकि parentElement null लौटाता है क्योंकि document कोई HTML टैग नहीं है।
Syntax, Formula & Technical Example (JavaScript DOM: Document Object Model Hierarchy and Nodes)
console.log(document.nodeType); // 9 (DOCUMENT_NODE)
console.log(document.documentElement.nodeName); // "HTML"
console.log(document.body.children.length); // Only Element children
console.log(document.body.childNodes.length); // Elements + Text + Comments
console.log(document.documentElement.parentElement); // null
JavaScript DOM: Document Object Model Hierarchy and Nodes Quick Reference & Comparison Table
| DOM Property / Constant | Return Value / Node Code | Key Exam Distinction |
|---|---|---|
| ELEMENT_NODE (nodeType 1) | HTML Tag Elements (div, p, ul) | nodeName returns uppercase tag name |
| TEXT_NODE (nodeType 3) | Character Data & Whitespace | nodeName is always '#text' |
| children | Live HTMLCollection (Elements) | Excludes text and comment nodes |
| childNodes | Live NodeList (All Nodes) | Includes text, comments, and elements |
JavaScript DOM: Document Object Model Hierarchy and Nodes Top 20 Bilingual MCQs with Answers
Q1. Which global property provides direct access to the root <html> element in a browser DOM?
(ब्राउज़र DOM में रूट <html> एलिमेंट को सीधे एक्सेस करने की प्रॉपर्टी कौन सी है?)
(A) document.rootNode
(B) document.bodyElement
(C) window.htmlRoot
(D) document.documentElement
Correct Answer: (D)
[EN] document.documentElement always references the root <html> tag of the document.
[HI] document.documentElement हमेशा दस्तावेज़ के रूट <html> टैग को संदर्भित करता है।
Q2. What integer value does node.nodeType return for an HTML Element node such as <p> or <div>?
(किसी HTML Element नोड (जैसे <p> या <div>) के लिए node.nodeType का मान क्या होता है?)
(A) 8
(B) 9
(C) 3
(D) 1
Correct Answer: (D)
[EN] Per W3C DOM Level specs, Element nodes return 1, Text nodes 3, Comments 8, and Document 9.
[HI] W3C DOM के अनुसार Element नोड का मान 1, Text का 3, Comment का 8 और Document का 9 होता है।
Q3. What is the nodeType integer code for a Text node in JavaScript DOM?
(JavaScript DOM में Text नोड का nodeType मान कितना होता है?)
(A) 9
(B) 3
(C) 2
(D) 1
Correct Answer: (B)
[EN] Text content inside elements and line-break whitespace between tags have nodeType 3.
[HI] टैग के भीतर का टेक्स्ट और टैग्स के बीच का व्हाइटस्पेस nodeType 3 (Text node) होता है।
Q4. Which nodeType code represents the top-level document object itself?
(शीर्ष-स्तरीय document ऑब्जेक्ट स्वयं किस nodeType कोड से पहचाना जाता है?)
(A) 9
(B) 1
(C) 11
(D) 0
Correct Answer: (A)
[EN] DOCUMENT_NODE corresponds to constant integer 9 in the DOM hierarchy.
[HI] DOCUMENT_NODE का मान DOM पदानुक्रम में 9 होता है।
Q5. What does document.body.firstChild return if there is a newline/space immediately after <body>?
(यदि <body> टैग के तुरंत बाद खाली स्पेस या नई लाइन हो, तो document.body.firstChild क्या लौटाएगा?)
(A) A Text node (#text) containing the whitespace
(B) undefined
(C) The first HTML element child
(D) A Comment node
Correct Answer: (A)
[EN] firstChild includes whitespace text nodes; use firstElementChild to skip whitespace.
[HI] firstChild व्हाइटस्पेस टेक्स्ट नोड (#text) लौटाता है; केवल टैग के लिए firstElementChild उपयोग करें।
Q6. Which property returns ONLY HTML element children and automatically ignores text/comment nodes?
(कौन सी प्रॉपर्टी टेक्स्ट व कमेंट नोड्स को छोड़कर केवल HTML एलिमेंट चिल्ड्रन लौटाती है?)
(A) element.childNodes
(B) element.innerNodes
(C) element.allNodes
(D) element.children
Correct Answer: (D)
[EN] children returns an HTMLCollection of Element objects only, unlike childNodes.
[HI] element.children केवल Element ऑब्जेक्ट्स का HTMLCollection लौटाता है।
Q7. What is the value of document.documentElement.parentElement?
(document.documentElement.parentElement का मान क्या होता है?)
(A) null
(B) document
(C) <html>
(D) window
Correct Answer: (A)
[EN] The parent of <html> is the Document node, which is not an Element, so parentElement is null.
[HI] <html> का पैरेंट document है जो स्वयं Element नहीं है, इसलिए parentElement null होता है।
Q8. What string does element.nodeName return for a <span> element inside an HTML5 page?
(HTML5 पेज में किसी <span> एलिमेंट के लिए element.nodeName क्या स्ट्रिंग लौटाता है?)
(A) "SPAN"
(B) "#element"
(C) "HTMLSpan"
(D) "span"
Correct Answer: (A)
[EN] In HTML documents, DOM nodeName always returns the tag name in uppercase.
[HI] HTML डॉक्यूमेंट में nodeName हमेशा कैपिटल अक्षरों (जैसे "SPAN") में टैग नाम लौटाता है।
Q9. What is the value of node.nodeName for a Text node?
(किसी Text नोड के लिए node.nodeName का मान क्या होता है?)
(A) "string"
(B) null
(C) "#text"
(D) "TEXT"
Correct Answer: (C)
[EN] Every Text node uses the standard identifier '#text' as its nodeName.
[HI] प्रत्येक Text नोड का nodeName मानक रूप से '#text' होता है।
Q10. What is the integer nodeType value for an HTML Comment node <!-- note -->?
(HTML कमेंट नोड (<!-- note -->) का nodeType पूर्णांक मान क्या होता है?)
(A) 10
(B) 4
(C) 8
(D) 3
Correct Answer: (C)
[EN] COMMENT_NODE is defined with numeric constant 8 in the DOM specification.
[HI] DOM विनिर्देश में COMMENT_NODE का संख्यात्मक मान 8 होता है।
Q11. Is the DOM a part of the core ECMAScript (JavaScript) language specification itself?
(क्या DOM स्वयं मूल ECMAScript (JavaScript) भाषा विनिर्देश का हिस्सा है?)
(A) Only in Node.js server runtime
(B) Yes, inside ES6 modules
(C) Yes, defined inside ECMA-262 Section 1
(D) No, DOM is a Web API provided by browsers outside core ECMAScript
Correct Answer: (D)
[EN] ECMAScript defines JS language syntax; DOM is standardized separately by W3C/WHATWG as a host Web API.
[HI] ECMAScript भाषा का सिंटैक्स तय करता है, जबकि DOM ब्राउज़र द्वारा दिया गया W3C/WHATWG Web API है।
Q12. What does node.hasChildNodes() return?
(node.hasChildNodes() मेथड क्या मान लौटाता है?)
(A) Boolean (true if the node has at least one child node, else false)
(B) Integer count of child elements
(C) Only text string of children
(D) Array of child elements
Correct Answer: (A)
[EN] hasChildNodes() returns true if any child (element, text, or comment) exists under that node.
[HI] यदि नोड के नीचे कोई भी चाइल्ड नोड मौजूद हो तो यह true अन्यथा false लौटाता है।
Q13. Which property skips whitespace text nodes and accesses the immediately following sibling HTML element?
(व्हाइटस्पेस टेक्स्ट नोड को छोड़कर ठीक अगले HTML सिबलिंग एलिमेंट को प्राप्त करने की प्रॉपर्टी कौन सी है?)
(A) nextElementSibling
(B) nextSibling
(C) siblingElement
(D) afterNode
Correct Answer: (A)
[EN] nextElementSibling returns the next Element sibling or null if none exists.
[HI] nextElementSibling अगला Element सिबलिंग लौटाता है, जबकि nextSibling टेक्स्ट नोड भी दे सकता है।
Q14. Which DOM nodeType (11) allows building off-screen node batches without triggering repeated page reflows?
(कौन सा DOM नोड प्रकार (nodeType 11) बिना बार-बार पेज रिफ्लो के मेमोरी में कई नोड्स जोड़ने में मदद करता है?)
(A) AttributeNode
(B) EntityReference
(C) DocumentFragment
(D) ShadowDocument
Correct Answer: (C)
[EN] DocumentFragment (nodeType 11) acts as a lightweight container appended to the live DOM in a single repaint.
[HI] DocumentFragment (nodeType 11) मेमोरी में नोड्स तैयार कर एक साथ लाइव DOM में जोड़ने हेतु उपयोगी है।
Q15. In the DOM tree, what is stored in textNode.nodeValue?
(DOM ट्री में textNode.nodeValue प्रॉपर्टी में क्या संग्रहीत होता है?)
(A) The uppercase HTML tag name
(B) Always null
(C) The actual string text inside the text node
(D) CSS computed style object
Correct Answer: (C)
[EN] For Element nodes nodeValue is null, whereas for Text and Comment nodes it holds their text string.
[HI] Element के लिए nodeValue null होता है जबकि Text व Comment नोड में उनका वास्तविक टेक्स्ट रहता है।
Q16. Which statement regarding node.children vs node.childNodes is FALSE?
(node.children बनाम node.childNodes के बारे में कौन सा कथन असत्य (FALSE) है?)
(A) node.childNodes includes whitespace text nodes
(B) node.children includes HTML comment nodes
(C) node.childNodes returns a NodeList
(D) node.children returns an HTMLCollection
Correct Answer: (B)
[EN] node.children only contains Element nodes and strictly ignores comments and text nodes.
[HI] node.children केवल Element नोड्स को रखता है, इसलिए यह कमेंट्स को शामिल नहीं करता।
Q17. Within JavaScript DOM: Document Object Model Hierarchy and Nodes, which dom property / constant directly maps to: "HTML Tag Elements (div, p, ul)"?
(JavaScript DOM: Document Object Model Hierarchy and Nodes में कौन सा DOM Property / Constant सीधे "HTML Tag Elements (div, p, ul)" से संबंधित है?)
(A) ELEMENT_NODE (nodeType 1)
(B) TEXT_NODE (nodeType 3)
(C) children
(D) childNodes
Correct Answer: (A)
[EN] In JavaScript DOM: Document Object Model Hierarchy and Nodes, 'ELEMENT_NODE (nodeType 1)' handles 'HTML Tag Elements (div, p, ul)' (nodeName returns uppercase tag name).
[HI] JavaScript DOM: Document Object Model Hierarchy and Nodes में 'ELEMENT_NODE (nodeType 1)' का कार्य/विवरण 'HTML Tag Elements (div, p, ul)' (nodeName returns uppercase tag name) है।
Q18. Which option accurately describes 'TEXT_NODE (nodeType 3)' in JavaScript DOM: Document Object Model Hierarchy and Nodes?
(JavaScript DOM: Document Object Model Hierarchy and Nodes के संदर्भ में 'TEXT_NODE (nodeType 3)' की सही विशेषता कौन सी है?)
(A) Live HTMLCollection (Elements)
(B) Live NodeList (All Nodes)
(C) Character Data & Whitespace
(D) HTML Tag Elements (div, p, ul)
Correct Answer: (C)
[EN] 'TEXT_NODE (nodeType 3)' provides 'Character Data & Whitespace' — key point: nodeName is always '#text'.
[HI] 'TEXT_NODE (nodeType 3)' का मुख्य विवरण 'Character Data & Whitespace' है (nodeName is always '#text')।
Q19. In JavaScript DOM: Document Object Model Hierarchy and Nodes, identify the correct parameter for the specification: "Live HTMLCollection (Elements)".
(JavaScript DOM: Document Object Model Hierarchy and Nodes में "Live HTMLCollection (Elements)" विवरण किस विकल्प के लिए सही है?)
(A) ELEMENT_NODE (nodeType 1)
(B) TEXT_NODE (nodeType 3)
(C) childNodes
(D) children
Correct Answer: (D)
[EN] 'children' corresponds to 'Live HTMLCollection (Elements)' (Excludes text and comment nodes).
[HI] 'children' का संबंध 'Live HTMLCollection (Elements)' (Excludes text and comment nodes) से है।
Q20. Considering JavaScript DOM: Document Object Model Hierarchy and Nodes, what key behavior defines 'childNodes'?
(JavaScript DOM: Document Object Model Hierarchy and Nodes में 'childNodes' की मुख्य भूमिका या मान क्या है?)
(A) Live NodeList (All Nodes)
(B) Character Data & Whitespace
(C) Live HTMLCollection (Elements)
(D) HTML Tag Elements (div, p, ul)
Correct Answer: (A)
[EN] 'childNodes' represents 'Live NodeList (All Nodes)' (Includes text, comments, and elements).
[HI] 'childNodes' का अर्थ/मान 'Live NodeList (All Nodes)' है (Includes text, comments, and elements)।
JavaScript DOM: Document Object Model Hierarchy and Nodes — Exam FAQs
Q1: Why does childNodes.length often show a higher number than expected?
childNodes.length अक्सर अपेक्षा से अधिक संख्या क्यों दिखाता है?
[EN] Browsers convert spaces, tabs, and line breaks between HTML tags into Text nodes, and childNodes counts all of them. Use children instead if you only want HTML tag elements.
[HI] HTML टैग्स के बीच के स्पेस और नई लाइनें Text नोड बन जाती हैं जिन्हें childNodes गिनता है। केवल टैग्स गिनने के लिए children का उपयोग करें।
Q2: Is the DOM identical to the View Source HTML code?
क्या DOM और View Source HTML कोड बिल्कुल एक जैसे होते हैं?
[EN] No. View Source shows the original raw HTML file sent by the server, whereas the DOM reflects the live browser tree after auto-fixing broken tags and executing JavaScript.
[HI] नहीं। View Source सर्वर से आया मूल HTML दिखाता है, जबकि DOM ब्राउज़र द्वारा त्रुटियाँ सुधारने और JavaScript चलने के बाद का लाइव रूप है।
Q3: What is the difference between parentNode and parentElement?
parentNode और parentElement में क्या मुख्य अंतर है?
[EN] Both match for almost all tags inside a page, except on <html> where parentNode returns the document object while parentElement returns null.
[HI] सामान्य टैग्स में दोनों समान होते हैं, लेकिन <html> रूट के लिए parentNode document लौटाता है जबकि parentElement null होता है।
Post a Comment
Post a Comment