नोड वस्तु और तत्व वस्तु के बीच अंतर?

301

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

यदि div एक एलीमेंट ऑब्जेक्ट है तो div Node ऑब्जेक्ट के बारे में क्या है?

एक नोड वस्तु क्या है?

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

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

तो कैसे एक वस्तु के रूप में के रूप में अच्छी तरह से नोड वस्तु के गुण / तरीके विरासत में मिला कर सकते हैं?

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

 <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]

javascript html dom

— पी
स्रोत

13

12 प्रकार के नोड हैं, उनमें से एक तत्व है

— एज़ेलिजा

क्या ये सभी 12 प्रकार तत्व ऑब्जेक्ट भी नहीं हैं? जैसे 1 = ELEMENT_NODE, 3 = TEXT_NODE, मुझे लगता है कि दोनों तत्व ऑब्जेक्ट भी हैं।

— PK

5

नहीं, वे नहीं हैं। तत्व केवल एक प्रकार का नोड है।

— एस्किला

480

nodeDOM पदानुक्रम में किसी भी प्रकार की वस्तु के लिए A सामान्य नाम है। एक nodeसे एक हो सकता है में निर्मित इस तरह के रूप डोम तत्वों documentया document.body, यह इस तरह के रूप में एक HTML टैग HTML में निर्दिष्ट किया जा सकता है <input>या <p>या यह एक पाठ नोड है कि एक और तत्व के अंदर पाठ का कोई खंड धारण करने के लिए प्रणाली द्वारा बनाई गई है हो सकता है । तो, संक्षेप में, कोई nodeभी DOM ऑब्जेक्ट है।

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

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

तो, nodeListयह केवल एक सरणी जैसी सूची है nodes।

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

यहां छवि विवरण दर्ज करें

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

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

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

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

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

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

— jfriend00
स्रोत

2

तो सभी तत्व नोड हैं, लेकिन सभी नोड तत्व नहीं हैं ... सही है? मैं बस इस बात पर विचार कर रहा था कि कुछ चीजों के माध्यम से पुनरावृत्ति करते समय जावास्क्रिप्ट कार्यों में नोड्स या तत्वों के रूप में चीजों का वर्णन करना है या नहीं।

— रयान विलियम्स

6

मुझे पता है कि मैं एक 7-वर्षीय पोस्ट को फिर से जीवित कर रहा हूं, लेकिन मैं सिर्फ इस उत्कृष्ट और गहन स्पष्टीकरण के लिए धन्यवाद कहना चाहता था! पूरा बोध कराया।

— AleksandrH

@ एलेक्ज़ेंडर - खुशी है कि यह अभी भी उपयोगी है।

— jfriend00

59

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

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

कुछ Nodeऑब्जेक्ट टेक्स्ट नोड हैं और वे Elementऑब्जेक्ट नहीं हैं। प्रत्येक Nodeऑब्जेक्ट में एक nodeTypeगुण होता है जो यह बताता है कि HTML दस्तावेज़ों के लिए यह किस प्रकार का नोड है:

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। (यह लाइन IE में काम नहीं करेगी __proto__। क्रोम, फ़ायरफ़ॉक्स, या सफारी का उपयोग करने की आवश्यकता होगी)।

वैसे, documentऑब्जेक्ट नोड ट्री के शीर्ष पर है, और documentएक Documentऑब्जेक्ट है, और साथ ही Documentविरासत में मिला है Node:

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

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

— nonopolarity
स्रोत

किस बारे में <span data-a="1" >123</span>? यह अवधि एक ऐसा तत्व है जिसके पास अपना नोड है। लेकिन क्या विशेषता का भी अपना नोड है?

— रॉय नमिर

एकमात्र बिंदु जो मैं स्पष्ट करना चाहता हूं वह यह है कि नोड एक वर्ग नहीं एक इंटरफ़ेस है। जिससे कई DOM API ऑब्जेक्ट प्रकार विरासत में मिले। यह उन प्रकारों को समान रूप से व्यवहार करने की अनुमति देता है; उदाहरण के लिए, तरीकों का एक ही सेट विरासत में मिला है, या उसी तरह से परीक्षण किया जा रहा है। मुझे यह मोज़िला लिंक में मिला जिसे आप संदर्भित करते हैं। अनमोल जवाब के लिए धन्यवाद

— अहमद खाशाबा

8

अपने सभी डोम संकटों के लिए जानकारी का सबसे अच्छा स्रोत

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

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

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

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

— मैट ईश
स्रोत

7

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

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

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

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

डुप्लिकेट:

— जेरोम सेन्स
स्रोत

4

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

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

टेक्स्ट नोड: वह नोड है, जिसके खुलने और बंद होने के बीच कंटिन्यू टेक्स्ट कंटेंट होता है। समाप्ति:<p>Hello</p>

तत्व नोड: नोड है जो इसके अंदर अन्य टैग है। समाप्ति:<p><b></b></p>

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

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

— hecarim
स्रोत