HTMLCollection, NodeLists और ऑब्जेक्ट्स के सरणियों के बीच अंतर


94

जब मैं DOM पर आता हूं तो मुझे HTMLCollections, ऑब्जेक्ट्स और सरणियों के बीच हमेशा भ्रमित किया जाता है। उदाहरण के लिए...

  1. बीच क्या अंतर है document.getElementsByTagName("td")और $("td")?
  2. $("#myTable")और $("td")ऑब्जेक्ट्स (jQuery ऑब्जेक्ट) हैं। क्यों कंसोल .log भी उनके बगल में DOM तत्वों की सरणी दिखा रहा है, और क्या वे ऑब्जेक्ट नहीं हैं और एक सरणी नहीं हैं?
  3. मायावी "नॉडलिस्ट" के बारे में क्या है, और मैं एक का चयन कैसे करूं?

कृपया नीचे दी गई स्क्रिप्ट की कोई भी व्याख्या प्रदान करें।

धन्यवाद

[123,"abc",321,"cba"]=[123,"abc",321,"cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table id="myTable">
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
$("#myTable")= Object[table#myTable]
$("td")= Object[td, td, td, td]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Collections?</title>  
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(function(){
                console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]);
                console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"});
                console.log('Node=',Node);
                console.log('document.links=',document.links);
                console.log('document.getElementById("myTable")=',document.getElementById("myTable"));
                console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))
                console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));
                console.log('$("#myTable")=',$("#myTable"));
                console.log('$("td")=',$("td"));
            });
        </script>
    </head>

    <body>
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <table id="myTable">
            <tr class="myRow"><td>td11</td><td>td12</td></tr>
            <tr class="myRow"><td>td21</td><td>td22</td></tr>
        </table>
    </body> 
</html>

मुझे लगता है कि मैं पोस्टीरिटी के लिए निम्नलिखित जोड़ सकता हूं। (ए) आधुनिक जावास्क्रिप्ट में, एक बेहतर तुलना document.querySelectorAll('td')और के बीच होगा $('td')। (ख) मौलिक अंतर यह है कि jQuery वस्तु जो, शामिल अन्य बातों के अलावा का अपना अलग प्रकार के साथ काम करता है, एक गिने HTML तत्वों का संग्रह; यह संग्रह उपरोक्त में से कोई भी नहीं है, और jQuery ऑब्जेक्ट मूल रूप से सच्चे DOM तत्वों के आसपास एक आवरण है
मन्नजो

जवाबों:


113

पहले मैं NodeListऔर के बीच का अंतर समझाऊंगा HTMLCollection

दोनों इंटरफेस डोम नोड्स के संग्रह हैं। वे उन तरीकों में भिन्न होते हैं जो वे प्रदान करते हैं और नोड्स के प्रकार में वे शामिल हो सकते हैं। जबकि NodeListकिसी में कोई नोड प्रकार हो सकता है, ए HTMLCollectionको केवल तत्व नोड्स होना चाहिए।
एक के HTMLCollectionरूप में एक ही तरीके प्रदान करता है NodeListऔर इसके अलावा एक विधि बुलाया namedItem

संग्रह का उपयोग हमेशा तब किया जाता है जब एक्सेस को कई नोड्स को प्रदान किया जाना होता है, जैसे कि अधिकांश चयनकर्ता विधियाँ (जैसे getElementsByTagName) कई नोड्स लौटाती हैं या सभी बच्चों के लिए संदर्भ प्राप्त करती हैं ( element.childNodes)।

अधिक जानकारी के लिए, DOM4 विनिर्देश - संग्रह पर एक नज़र है ।

बीच क्या अंतर है document.getElementsByTagName("td")और $("td")?

getElementsByTagNameDOM इंटरफ़ेस की विधि है। यह एक टैग नाम इनपुट के रूप में स्वीकार करता है और एक HTMLCollection( DOM4 विनिर्देशन देखें ) देता है।

$("td")संभवतः jQuery है। यह किसी भी मान्य सीएसएस / jQuery चयनकर्ता को स्वीकार करता है और एक jQuery ऑब्जेक्ट देता है।

मानक DOM संग्रह और jQuery के चयन के बीच सबसे बड़ा अंतर यह है कि DOM संग्रह आमतौर पर लाइव होते हैं (हालांकि सभी विधियाँ एक लाइव संग्रह नहीं लौटाती हैं), अर्थात DOM के किसी भी परिवर्तन को प्रभावित होने पर संग्रह में परिलक्षित किया जाता है। वे DOM ट्री पर एक दृश्य की तरह हैं , जबकि jQuery के चयन उस फंक्शन को कहे जाने वाले पल में DOM ट्री के स्नैपशॉट हैं।

क्यों कंसोल .log भी उनके बगल में DOM तत्वों की सरणी दिखा रहा है, और क्या वे ऑब्जेक्ट नहीं हैं और एक सरणी नहीं हैं?

jQuery की वस्तुएँ सरणी की तरह की वस्तुएँ होती हैं, अर्थात उनमें संख्यात्मक गुण और एक lengthसंपत्ति होती है (ध्यान रखें कि सरणियाँ केवल स्वयं की वस्तुएँ हैं)। ब्राउज़रों में ऐरे और एरे जैसी वस्तुओं को एक विशेष तरीके से प्रदर्शित किया जाता है, जैसे [ ... , ... , ... ]

मायावी "नॉडलिस्ट" के बारे में क्या है, और मैं एक का चयन कैसे करूं?

मेरे उत्तर का पहला भाग देखें। आप s का चयन नहीं कर सकते NodeList, वे एक चयन का परिणाम हैं ।

जहाँ तक मुझे पता है कि NodeListप्रोग्राम बनाने का एक तरीका भी नहीं है (यानी एक खाली बनाने और बाद में नोड्स जोड़ने के लिए), वे केवल कुछ डोम तरीकों / गुणों द्वारा लौटाए जाते हैं।


2
@ user1032531: ठीक है, यदि आप चयनित DOM तत्वों में से किसी एक में परिवर्तन करते हैं (उदाहरण के लिए एक बच्चा जोड़ना), तो आप निश्चित रूप से परिवर्तन को देखेंगे क्योंकि यह एक और एक ही DOM तत्व है। लेकिन, आपने सभी tdतत्वों को चुना है, एक नए tdतत्व को बाद में जोड़ने पर नए तत्व को शामिल करने के लिए चयन स्वचालित रूप से अपडेट नहीं होगा।
फेलिक्स क्लिंग

2
@FelixKling: आपको उल्लेख करना चाहिए कि सभी NodeListएस लाइव नहीं हैं।
बर्गी

2
काश वे सभी एरेज़ होते
SuperUberDuper

7
ऐसा भी लगता है कि तरीके "चाबियाँ", "प्रविष्टियां" और "forEach" मैं NodeList में मौजूद हैं, लेकिन HTMLCollection में गायब है
Krzysztof

2
@KrzysztofGrzybek यह सही है और यह सुपर कष्टप्रद है। क्यों उनमें से एक बिल्ली है .forEach()और दूसरा नहीं है?
रोबो रोबोक

30

0. a और a के बीच अंतर क्या है ?HTMLCollectionNodeList

यहां आपके लिए कुछ परिभाषाएं दी गई हैं।

DOM स्तर 1 युक्ति - विविध वस्तु परिभाषाएँ :

इंटरफ़ेस HTMLCollection

एक HTMLCollection नोड्स की एक सूची है। एक इंडिविजुअल नोड को ऑर्डिनल इंडेक्स या नोड के नाम या आईडी विशेषताओं द्वारा एक्सेस किया जा सकता है। नोट: HTML डोम में संग्रह को लाइव अर्थ माना जाता है कि अंतर्निहित दस्तावेज़ बदलने पर वे स्वचालित रूप से अपडेट हो जाते हैं।

DOM स्तर 3 युक्ति - नोडलिस्ट

इंटरफ़ेस नोडलिस्ट

NodeList इंटरफ़ेस नोड्स के एक आदेशित संग्रह के अमूर्तता प्रदान करता है, इस संग्रह को कैसे लागू या परिभाषित किया जाता है, इसे परिभाषित या विवश किए बिना। DOM में NodeList ऑब्जेक्ट्स लाइव हैं।

NodeList में आइटम 0 से शुरू होने वाले एक अभिन्न सूचकांक के माध्यम से सुलभ हैं।

तो वे दोनों में लाइव डेटा हो सकते हैं, जिसका अर्थ है कि जब उनके मूल्यों को डोम अपडेट करेगा। इनमें कार्यों का एक अलग सेट भी होता है।

यदि आप अपनी स्क्रिप्ट चलाते हैं तो आप ध्यान देंगे कि क्या आप अपनी स्क्रिप्ट चलाते हैं कि tableDOM तत्व में a childNodes NodeList[2]और a दोनों हैं children HTMLCollection[1]। वे अलग क्यों हैं? क्योंकि HTMLCollectionकेवल तत्व नोड्स हो सकते हैं, नॉडलिस्ट में एक टेक्स्ट नोड भी होता है।

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

1. क्या अंतर है document.getElementsByTagName("td")और $("td")?

document.getElementsByTagName("td")रिटर्न डोम तत्वों की एक सरणी (एक NodeList), $("td")एक jQuery वस्तु जहाँ से तत्व है कहा जाता है document.getElementsByTagName("td")उसके गुण पर 0, 1, 2, आदि मुख्य अंतर यह है कि jQuery वस्तु एक छोटे से पुनः प्राप्त करने के धीमी है लेकिन सभी काम करने के लिए पहुँच प्रदान करता है jQuery के कार्य।

2. $("#myTable")और $("td")ऑब्जेक्ट्स ( jQueryऑब्जेक्ट्स) हैं। console.logउनके बगल में DOM तत्वों की सरणी क्यों दिखाई जा रही है, और क्या वे ऑब्जेक्ट नहीं हैं और एक सरणी नहीं हैं?

वे अपने गुणों के साथ वस्तुओं रहे हैं 0, 1, 2, आदि डोम तत्वों के लिए सेट। यहाँ एक सरल उदाहरण है: यह कैसे काम करता है:

jsFiddle

    var a = {
        1: "first",
        2: "second"
    }
    alert(a[1]);

3. मायावी "नॉडलिस्ट" के बारे में क्या है, और मैं एक का चयन कैसे करूं?

आप उन्हें अपने कोड में पुन: प्राप्त करने की है, getElementsByClassNameऔर getElementsByTagNameदोनों वापसी NodeListहै

NodeList


आपने अपनी तीसरी प्रतिक्रिया में DOM को कैसे प्रदर्शित किया? धन्यवाद!
user1032531

@ user1032531 जो क्रोम देव उपकरण है। वैसे मैंने जवाब की शुरुआत को अपडेट किया।
डैनियल इम्स

सरणी-जैसा लॉग अधिकतर lengthसंपत्ति का परिणाम होता है , संख्यात्मक संपत्ति के नामों का नहीं। और एक स्ट्रिंग को सचेत करने के आपके उदाहरण का क्या करना है console.log?
बर्गी

यह दिखा रहा था कि आप वस्तुओं पर संख्यात्मक गुण कैसे रख सकते हैं। मैं तथ्यों पर जोर देने की कोशिश कर रहा हूं कि वे वस्तुएं हैं, सरणियां नहीं।
डैनियल इम्स

9

अतिरिक्त नोट

HTMLCollection और NodeList में क्या अंतर है?

एक HTMLCollection में केवल तत्व नोड्स ( टैग ) होते हैं और एक नोडलिस्ट में सभी नोड होते हैं

चार नोड प्रकार हैं:

  1. तत्व नोड
  2. विशेषता नोड
  3. पाठ नोड
  4. टिप्पणी नोड

nodeTypes

तत्वों के अंदर व्हाट्सएप को पाठ माना जाता है, और पाठ को नोड के रूप में माना जाता है।

निम्नलिखित को धयान मे रखते हुए:

<ul id="myList">
  <!-- List items -->
  <li>List item 1</li> 
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

श्वेत रिक्ति: <ul id="myList"> <li>List item</li></ul>

कोई व्हाट्सएप नहीं: <ul id="myList"><li>List item</li></ul>

HTMLCollection और एक NodeList के बीच अंतर


2

$("td")विस्तारित jQuery ऑब्जेक्ट है और इसमें jQuery विधियाँ हैं, यह jquery ऑब्जेक्ट देता है जिसमें HTML ऑब्जेक्ट्स की सरणी होती है। document.getElementsByTagName("td")कच्चे जेएस विधि है और NodeList देता है। इस लेख को देखें


धन्यवाद करुणा हां, मैंने उस लेख को देखा था। पता नहीं अगर यह मदद की, लेकिन निश्चित रूप से मुझे और अधिक सवाल पूछा :)
user1032531

थैंक्स @ ओंकारकुना। उपयोगी लेख, बहुत अच्छी तरह से समझाया गया।
Giuseppe

0

NodeList वस्तुओं नोड के संग्रह, एक्स द्वारा उदाहरण के लिए लौटे हैं। चाइल्डनॉड्स प्रॉपर्टी या डॉक्यूमेंट ।querySelectorAll () विधि। कुछ मामलों में, नोडलिस्ट लाइव है , जिसका अर्थ है कि डोम में परिवर्तन स्वचालित रूप से संग्रह को अपडेट करता है! उदाहरण के लिए, Node.childNodes लाइव है:

var c = parent.childNodes; //assume c.length is 2
parent.appendChild(document.createElement('div'));
//now c.length is 3, despite the `c` variable is assigned before appendChild()!!
//so, do not cache the list's length in a loop.

लेकिन कुछ अन्य मामलों में, नोडलिस्ट स्थिर है , जहां डोम में कोई भी परिवर्तन संग्रह की सामग्री को प्रभावित नहीं करता है। querySelectorAll () एक स्थिर NodeList देता है।

HTMLCollection एक है लाइव और आदेश दिया (यह स्वचालित रूप से जब अंतर्निहित दस्तावेज़ बदल गया है अद्यतन किया जाता है) तत्वों का संग्रह। यह बच्चों की तरह गुणों का परिणाम हो सकता है या डॉक्यूमेंट्स के रूप में तरीके ।getElementsByTagName () , और केवल HTMLElement उनके आइटम के रूप में हो सकता है

HTMLCollection भी अपने सदस्यों को सीधे नाम और सूचकांक दोनों के गुणों के रूप में उजागर करता है:

var f = document.forms; // this is an HTMLCollection
f[0] === f.item(0) === f.myForm //assume first form id is 'myForm'

HTMLElement सिर्फ एक प्रकार का नोड है:

नोड << HTMLElement inheritance

नोड कई प्रकार के हो सकते हैं । सबसे महत्वपूर्ण निम्नलिखित हैं:

  • तत्व (1): एक तत्व नोड जैसे <p>या <div>
  • विशेषता (2): एक तत्व का गुण। तत्व विशेषताएँ अब DOM4 विनिर्देशन में नोड इंटरफ़ेस को लागू नहीं कर रही हैं!
  • पाठ (3): तत्व या गुण का वास्तविक पाठ।
  • टिप्पणी (8): एक टिप्पणी नोड।
  • दस्तावेज़ (9): एक दस्तावेज़ नोड।

तो, एक बड़ा अंतर यह है कि HTMLCollection में केवल HTMLElements शामिल हैं, लेकिन NodeList में टिप्पणियाँ, सफ़ेद-स्थान पाठ (गाड़ी वापसी चार्ट, स्थान ..) भी शामिल हैं, आदि इसे निम्न स्निपेट में जाँचें:

function printList(x, title) {
  console.log("\r\nprinting "+title+" (length="+x.length+"):");
  for(var i=0; i<x.length; i++) {
    console.log("  "+i+":"+x[i]);
  }
}

var elems = document.body.children; //HTMLCollection
var nodes = document.body.childNodes; //NodeList

printList(elems, "children [HTMLCollection]");
printList(nodes, "childNodes [NodeList]");
<div>para 1</div><!-- MyComment -->
<div>para 2</div>

HTMLCollection और NodeList दोनों में लंबाई की संपत्ति होती है जिसका उपयोग आप उनके आइटम पर लूप करने के लिए कर सकते हैं । NodeLists में आइटम को एन्यूमरेट करने के लिए ... में या प्रत्येक के लिए ... का उपयोग न करें, क्योंकि वे इसकी लंबाई और आइटम गुणों को भी एन्यूमरेट करेंगे और त्रुटियों का कारण बनेंगे, यदि आपकी स्क्रिप्ट यह मानती है कि इसे केवल तत्व ऑब्जेक्ट्स से निपटना है। इसके अलावा, for..in को किसी विशेष क्रम में संपत्ति का दौरा करने की गारंटी नहीं है।

for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];
}

0

इतना कुछ पहले ही बताया जा चुका है, लेकिन सोचा था कि उत्तर के एक और अधिक संक्षिप्त संस्करण को उदाहरण के साथ अंतर को समझाने HTMLCollectionऔर NodeListमदद करने में मदद मिलेगी।

DOM में नोड्स के प्रकार

  • 12 विभिन्न नोड प्रकार हैं, जिनमें विभिन्न नोड प्रकार के बच्चे हो सकते हैं:

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

  • हम डोम में नोड्स के बारे में निरीक्षण और पूछताछ करने के लिए निम्नलिखित तीन गुणों का उपयोग कर सकते हैं:

    • nodeType संपत्ति
    • nodeName संपत्ति
    • nodeValue संपत्ति
  • nodeTypeसंपत्ति नोड प्रकार, एक संख्या के रूप में निर्दिष्ट नोड के देता है।

    • यदि नोड एक तत्व नोड है, तो nodeTypeसंपत्ति 1 वापस आ जाएगी
    • यदि नोड एक विशेषता नोड है, तो nodeTypeसंपत्ति 2 वापस आ जाएगी
    • यदि नोड एक टेक्स्ट नोड है, तो nodeTypeसंपत्ति 3 वापस आ जाएगी
    • यदि नोड एक टिप्पणी नोड है, तो nodeTypeसंपत्ति 8 वापस आ जाएगी
    • यह संपत्ति केवल पढ़ने के लिए है।

HTMLCollection बनाम नॉडलिस्ट

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

हम निम्नलिखित उदाहरण के बीच HTMLCollectionऔर NodeListअधिक स्पष्ट रूप से अंतर को समझ सकते हैं । कृपया, बेहतर समझने के लिए अपने स्वयं के ब्राउज़र कंसोल में आउटपुट की जांच करने का प्रयास करें।

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>bar</li>
</ul>
// retrieve element using querySelectorAll
const listItems_querySelector = document.querySelectorAll('li');
console.log('querySelector', listItems_querySelector);

// retrieve element using childNodes
const list  = document.querySelector('ul')
const listItems_childNodes = list.childNodes;
console.log('childNodes', listItems_childNodes);
const listItems_children = list.children;
console.log('children', listItems_children);

const listItems_getElementsByTagName = document.getElementsByTagName('li');
console.log('getElementsByTagName', listItems_getElementsByTagName);

console.log('*************************');
console.log('add one list item');
console.log('*************************');
list.appendChild(document.createElement('li'));

console.log('querySelector', listItems_querySelector);
console.log('childNodes', listItems_childNodes);
console.log('children', listItems_children);
console.log('getElementsByTagName', listItems_getElementsByTagName);

console.log('*************************');
console.log('add one more list item');
console.log('*************************');
listItems_getElementsByTagName[0].parentNode.appendChild(document.createElement('li'));

console.log('querySelector', listItems_querySelector);
console.log('childNodes', listItems_childNodes);
console.log('children', listItems_children);
console.log('getElementsByTagName', listItems_getElementsByTagName); 
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.