नोड ऑब्जेक्ट और एलिमेंट ऑब्जेक्ट के बीच अंतर?

Question

मैं नोड ऑब्जेक्ट और एलिमेंट ऑब्जेक्ट के बीच पूरी तरह उलझन में हूं। document.getElementById() रिटर्न तत्व वस्तु जबकि document.getElementsByClassName() रिटर्न NodeList वस्तु (तत्वों या नोड्स का संग्रह?)

तो एक div है एक तत्व वस्तु तो किस बारे में div नोड वस्तु?

नोड ऑब्जेक्ट क्या है?

क्या दस्तावेज़ ऑब्जेक्ट, एलिमेंट ऑब्जेक्ट और टेक्स्ट ऑब्जेक्ट भी नोड ऑब्जेक्ट हैं?

डेविड फ्लानगन की पुस्तक 'द दस्तावेज़ ऑब्जेक्ट, इसके एलिमेंट ऑब्जेक्ट्स और टेक्स्ट ऑब्जेक्ट्स के अनुसार सभी नोड ऑब्जेक्ट्स' के अनुसार।

तो ऑब्जेक्ट ऑब्जेक्ट के साथ-साथ नोड ऑब्जेक्ट के गुण/विधियों को कैसे प्राप्त किया जा सकता है?

यदि हां, मुझे लगता है कि नोड क्लास और एलिमेंट क्लास विरासत के प्रोटोटाइप पेड़ से संबंधित हैं।

<div id="test"> 
      <p class="para"> 123 </p> 
      <p class="para"> abc </p> 
</div> 
<p id="id_para"> next </p> 

document.documentElement.toString(); // [object HTMLHtmlElement] 

var div = document.getElementById("test"); 
div.toString();       // [object HTMLDivElement]      

var p1 = document.getElementById("id_para"); 
p1.toString();       // [object HTMLParagraphElement] 

var p2 = document.getElementsByClassName("para"); 
p2.toString();       //[object HTMLCollection] 

Answer 1

ए node डीओएम पदानुक्रम में किसी भी प्रकार की वस्तु के लिए सामान्य नाम है। nodedocument या document.body जैसे अंतर्निहित डीओएम तत्वों में से एक हो सकता है, यह HTML में निर्दिष्ट एक HTML टैग हो सकता है जैसे कि <input> या <p> या यह एक टेक्स्ट नोड हो सकता है जो सिस्टम द्वारा ब्लॉक को पकड़ने के लिए बनाया गया हो किसी अन्य तत्व के अंदर पाठ का। तो, संक्षेप में, node कोई भी DOM ऑब्जेक्ट है।

एक element एक विशिष्ट प्रकार का node है क्योंकि कई अन्य प्रकार के नोड्स (टेक्स्ट नोड्स, टिप्पणी नोड्स, दस्तावेज़ नोड्स इत्यादि ...) हैं।

डोम में नोड्स का पदानुक्रम होता है जहां प्रत्येक नोड में माता-पिता हो सकते हैं, बाल नोड्स की एक सूची और अगली सिब्लिंग और पिछली सिब्लिंग हो सकती है। वह संरचना एक पेड़ की तरह पदानुक्रम बनाती है। document नोड में बच्चे नोड्स की सूची होगी (head नोड और body नोड)। body नोड में बाल नोड्स (आपके HTML पृष्ठ में शीर्ष स्तर के तत्व) की सूची होगी और इसी तरह।

तो, nodeListnodes की एक सरणी जैसी सूची है।

एक तत्व एक विशिष्ट प्रकार का नोड है, जिसे HTML में सीधे HTML टैग के साथ निर्दिष्ट किया जा सकता है और इसमें id या class जैसी गुण हो सकते हैं। बच्चों, आदि हो सकता है ... विभिन्न विशेषताओं के साथ टिप्पणी नोड्स, टेक्स्ट नोड्स, आदि जैसे अन्य प्रकार के नोड्स हैं। प्रत्येक नोड में एक संपत्ति .nodeType है जो रिपोर्ट करती है कि यह किस प्रकार का नोड है। आप (MDN से आरेख) यहाँ नोड्स के विभिन्न प्रकार देख सकते हैं:

आप देख सकते हैं एक ELEMENT_NODE नोड के एक विशेष प्रकार जहां nodeType संपत्ति 1 के एक मूल्य है।

तो document.getElementById("test") केवल एक नोड लौटा सकता है और यह एक तत्व (एक विशिष्ट प्रकार का नोड) होने की गारंटी देता है। इसके कारण यह सिर्फ एक सूची के बजाय तत्व देता है।

document.getElementsByClassName("para") एक से अधिक ऑब्जेक्ट लौटा सकता है, डिजाइनरों ने nodeList वापस करने का विकल्प चुना क्योंकि यह एक से अधिक नोड की सूची के लिए बनाया गया डेटा प्रकार है। चूंकि ये केवल तत्व हो सकते हैं (केवल तत्वों में आमतौर पर कक्षा का नाम होता है), यह तकनीकी रूप से nodeList है जिसमें केवल इसमें टाइप तत्व का नोड होता है और डिजाइनर एक अलग नामित संग्रह बना सकते थे जो elementList था, लेकिन उन्होंने बस उपयोग करना चुना एक प्रकार का संग्रह चाहे इसमें केवल तत्व हों या नहीं।

---

संपादित करें: एचटीएमएल 5 एक HTMLCollection जो एचटीएमएल तत्वों (नहीं किसी भी नोड, केवल तत्वों) की एक सूची है परिभाषित करता है। एचटीएमएल 5 में कई गुण या विधियां अब HTMLCollection लौटाती हैं। हालांकि यह nodeList पर इंटरफ़ेस में बहुत समान है, लेकिन अब एक भेद बना दिया गया है जिसमें इसमें केवल तत्व होते हैं, न कि किसी प्रकार का नोड।

nodeList और HTMLCollection के बीच भेद का कोई प्रभाव नहीं है कि आप कैसे उपयोग करते हैं (जहां तक ​​मैं कह सकता हूं), लेकिन HTML5 के डिजाइनरों ने अब उस भेद को बनाया है।

उदाहरण के लिए, element.children संपत्ति एक लाइव HTMLCollection देता है।

Answer 2

नोड: http://www.w3schools.com/js/js_htmldom_nodes.asp

नोड वस्तु दस्तावेज़ पेड़ में एक भी नोड प्रतिनिधित्व करता है। एक नोड नोड प्रकार अध्याय में एक तत्व नोड, एक विशेषता नोड, एक पाठ नोड, या नोड प्रकार के किसी अन्य प्रकार हो सकता है।

तत्व: http://www.w3schools.com/js/js_htmldom_elements.asp

तत्व वस्तु एक XML दस्तावेज में एक तत्व का प्रतिनिधित्व करता है। तत्वों में गुण, अन्य तत्व या टेक्स्ट हो सकते हैं। यदि किसी तत्व में टेक्स्ट होता है, तो टेक्स्ट को टेक्स्ट-नोड में दर्शाया जाता है।

डुप्लिकेट:

• What's the difference between an element and a node in XML?
• Why are Nodes and Elements different in XML? What was the rationale?

Answer 3

अपने डोम के सभी के लिए जानकारी का

बेस्ट स्रोत संकट

http://www.w3.org/TR/dom/#nodes

"ऑब्जेक्ट्स को दस्तावेज़, दस्तावेज़फ्रेगमेंट, दस्तावेज़ टाइप, एलिमेंट, टेक्स्ट, प्रसंस्करण निर्देश, या टिप्पणी इंटरफ़ेस (जिसे नोड कहा जाता है) को लागू करने वाले ऑब्जेक्ट्स पेड़ में भाग लेते हैं।"

http://www.w3.org/TR/dom/#element

"तत्व नोड्स बस तत्व के रूप में जाना जाता है।"

Answer 4

Node एक वृक्ष संरचना को लागू करने के लिए है, इसलिए अपने तरीके हैं firstChild, lastChild, childNodes, आदि के लिए यह एक सामान्य वृक्ष संरचना के लिए एक वर्ग के अधिक है।

और फिर, कुछ Node ऑब्जेक्ट्स भी Element ऑब्जेक्ट्स हैं।ElementNode से विरासत प्राप्त करता है। Element ऑब्जेक्ट्स वास्तव में <div id="content"></div> जैसे टैग द्वारा HTML फ़ाइल में निर्दिष्ट वस्तुओं का प्रतिनिधित्व करता है। Element वर्ग attributes, id, innerHTML, clientWidth, blur(), और focus() जैसे गुणों और विधियों को परिभाषित करता है।

कुछ Node ऑब्जेक्ट्स टेक्स्ट नोड्स हैं और वे Element ऑब्जेक्ट्स नहीं हैं।

1: Element node 
3: Text node 
8: Comment node 
9: the top level node, which is document 

हम कंसोल में कुछ उदाहरण देख सकते:

> document instanceof Node 
    true 

> document instanceof Element 
    false 

> document.firstChild 
    <html>...</html> 

> document.firstChild instanceof Node 
    true 

> document.firstChild instanceof Element 
    true 

> document.firstChild.firstChild.nextElementSibling 
    <body>...</body> 

> document.firstChild.firstChild.nextElementSibling === document.body 
    true 

> document.firstChild.firstChild.nextSibling 
    #text 

> document.firstChild.firstChild.nextSibling instanceof Node 
    true 

> document.firstChild.firstChild.nextSibling instanceof Element 
    false 

> Element.prototype.__proto__ === Node.prototype 
    true 

अंतिम पंक्ति ऊपर कि Element से पता चलता प्रत्येक Node वस्तु एक nodeType संपत्ति है कि इंगित करता है यह है नोड के लिए किस प्रकार, HTML दस्तावेज़ के लिए है Node से विरासत। (वह लाइन __proto__ के कारण आईई में काम नहीं करेगी। क्रोम, फ़ायरफ़ॉक्स, या सफारी का उपयोग करने की आवश्यकता होगी)।

वैसे, document वस्तु नोड पेड़ के शीर्ष है, और document एक Document वस्तु है, और Node से Document inherits रूप में अच्छी तरह:

> Document.prototype.__proto__ === Node.prototype 
    true 

यहाँ नोड और तत्व के लिए कुछ डॉक्स हैं कक्षाएं:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Answer 5

नोड सामान्य रूप में टैग का प्रतिनिधित्व करने के लिए किया जाता है। 3 प्रकार के लिए विभाजित:

विशेषता नोट: नोड है जिसमें इसके गुण हैं। एक्सप: <p id=”123”></p>

टेक्स्ट नोड: नोड जो खोलने और बंद करने के बीच में contian टेक्स्ट सामग्री है। एक्सप: <p>Hello</p>

एलिमेंट नोड: नोड है जिसमें इसके अन्य टैग हैं। एक्सप: <p><b></b></p>

प्रत्येक नोड एक साथ प्रकार हो सकता है, जरूरी नहीं कि केवल एक ही प्रकार का हो।

तत्व केवल एक तत्व नोड है।