QuerySelectorAll और getElementsBy * तरीके क्या लौटाते हैं?

Question

करो getElementsByClassNameऔर समान कार्य करोgetElementsByTagName और querySelectorAll) उसी काम करते हैं getElementByIdया वे तत्वों की एक सरणी लौटाते हैं?

मेरे द्वारा पूछे जाने का कारण यह है क्योंकि मैं उपयोग करने वाले सभी तत्वों की शैली को बदलने की कोशिश कर रहा हूं getElementsByClassName। निचे देखो।

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

Comments

सुराग, बहुत, नाम में है: getElementsByClassName()एक बहुवचन का अर्थ है, जबकि getElementById()एक विलक्षण तत्व आइटम का अर्थ है।

— डेविड का कहना है कि मोनिका

मुझे लगता है कि, यह सिर्फ मेरे लिए समझ में नहीं आया कि आप किसी सरणी के माध्यम से लूप करने के बजाय ऊपर दिए गए कोड का उपयोग करके उस वर्ग नाम के साथ सभी तत्वों को नहीं बदल सकते। jquery का तरीका बहुत बेहतर है, मैं सिर्फ js तरीके के बारे में उत्सुक था

— dmo

उपयोगी भी हो सकता है: stackoverflow.com/questions/3871547/…

— kaap

Answer 1

आपका getElementById()कोड काम करता है क्योंकि आईडी को अद्वितीय होना चाहिए और इस प्रकार फ़ंक्शन हमेशा एक तत्व (या nullयदि कोई नहीं मिला) वापस लौटाता है ।

हालांकि, getElementsByClassName(), querySelectorAll(), और अन्य getElementsBy*तरीकों तत्वों की एक सरणी की तरह संग्रह लौट आते हैं। आप इसे एक वास्तविक सरणी के साथ पसंद करेंगे:

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

यदि आप कुछ कम पसंद करते हैं, तो jQuery का उपयोग करने पर विचार करें :

$('.myElement').css('size', '100px');

Comments

क्या यह उस पर भी लागू होता है <iframe>जो आपके डोमेन का हिस्सा भी है

— JMASTER B

यह 2018 है ... बस एक रैपर फ़ंक्शन बनाएं querySelectorAll()और आपके पास एक बड़े, पुराने स्कूल की निर्भरता के बिना अच्छा शॉर्ट कोड हो सकता है। qSA(".myElement").forEach(el => el.style.size = "100px")हो सकता है कि रैपर को कॉलबैक मिले। qSA(".myElement", el => el.style.size = "100px")

"यदि आप कुछ कम पसंद करते हैं, तो अपनी परियोजना में एक विशाल पुस्तकालय जोड़ने पर विचार करें" मुझे पता है कि 2012 एक अलग समय था, लेकिन फिर भी मुझे लगता है कि थोड़ा अजीब होगा।

— CoryCoolguy

"मैं इसे एक वास्तविक सरणी के साथ पसंद करता हूं ... सावधान, getElementsByClassName एक जीवित नोडलिस्ट देता है जिसे अनपेक्षित रूप से लूप के दौरान संशोधित किया जा सकता है, उदाहरण के लिए, जिस

— क्लासनाम

Answer 2

आप किसी सरणी को एक ऑब्जेक्ट के रूप में उपयोग कर रहे हैं, getElementbyIdऔर इसके बीच का अंतर getElementsByClassNameहै:

• getElementbyIdएक एलिमेंट ऑब्जेक्ट वापस करेगायदि कोई तत्व ID के साथ नहीं मिला है, तो या अशक्त
• getElementsByClassNameयदि कोई मिलान तत्व नहीं मिले तो संभवतः एक लाइव HTMLCollection , लंबाई 0 पर वापस आ जाएगा

getElementsByClassName

getElementsByClassName(classNames)विधि एक स्ट्रिंग है अद्वितीय अंतरिक्ष से अलग किए टोकन वर्गों का प्रतिनिधित्व करने के लिए एक अव्यवस्थित सेट होता है लेता है। जब कहा जाता है, तो विधि को NodeListदस्तावेज़ में सभी तत्वों से युक्त एक जीवित वस्तु को वापस करना होगा, जिसमें उस तर्क में निर्दिष्ट सभी वर्ग हैं, जो रिक्त स्थान पर एक स्ट्रिंग को विभाजित करके कक्षाएं प्राप्त करता है। यदि तर्क में कोई टोकन निर्दिष्ट नहीं हैं, तो विधि को एक रिक्त नोडलिस्ट को वापस करना होगा।

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

GetElementById () विधि निर्दिष्ट आईडी के साथ पहले तत्व को एक्सेस करती है।

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

आपके कोड में लाइनें:

1- डॉक्यूमेंट.गेटईल्सबायक्लासनाम ('myElement')। style.size = '100px';

अपेक्षा के अनुसार काम नहीं करेगा , क्योंकि getElementByClassNameएक सरणी वापस आ जाएगी, और सरणी में संपत्ति नहीं होगी style, आप प्रत्येक तक पहुंच सकते हैंelement को उनके माध्यम से पुनरावृत्ति करके हैं।

इसीलिए फ़ंक्शन getElementByIdने आपके लिए काम किया, यह फ़ंक्शन डायरेक्ट ऑब्जेक्ट को लौटाएगा। इसलिए आप styleसंपत्ति का उपयोग करने में सक्षम होंगे ।

Comments

ध्यान दें कि ब्राउज़र द्वारा कार्यान्वित किए जा रहे व्हाट्सएप स्पेक्स यहां w3c से भिन्न होते हैं, पूर्व (और इसलिए वर्तमान ब्राउज़र) getElementsByClassName के लिए HTMLCollection लौटाते हैं, नॉडलिस्ट नहीं। मामूली, लेकिन कुछ भ्रमित कर सकते हैं।

— काइदो

@ काइडो- व्यावहारिक अंतर…? मेरी समझ से, एक नोडलिस्ट DOM तत्वों का एक सामान्य संग्रह है और किसी भी DOM में उपलब्ध है, न कि केवल एक HTML DOM (उदाहरण के लिए XML DOM), जबकि HTML DOM (स्पष्ट रूप से) के लिए HTMLCollection है। फर्क सिर्फ इतना है मैं देख सकता है namedItem एक की विधि HTMLCollection ।

— रॉबग

PS नाइट पिक: WHATWG HTML लिविंग स्टैंडर्ड और W3C HTML 5.2 मानक के लिए लिंक । पसंद से उगाया हुआ। ;-) आपके द्वारा उठाए गए बिंदु पर कोई अंतर नहीं डालता है।

— रॉब

@RobG NodeList के कई तरीके हैं जो HTMLCollection पर उपलब्ध नहीं हैं।

— काइदो

@ Kaiido-यकीन है, लेकिन foreach या तो संग्रह या NodeList W3C या WHATWG द्वारा लिए इंटरफ़ेस के भाग के रूप निर्दिष्ट नहीं है, उस में सामान्य संग्रह में से एक संपत्ति के रूप में अलग से निर्दिष्ट है, जैसे वेब आईडीएल विनिर्देश तो चाहिए दोनों संग्रह और NodeLists पर लागू होते हैं (हालांकि मैं आपकी बात स्वीकार करता हूं कि getElementsByClassName द्वारा लौटाए गए संग्रह में कोई पूर्व विधि नहीं है )। मुझे लगता है कि लब्बोलुआब यह है कि यह बताने के लिए एक अच्छे उत्तर के लिए एक कहानी काफ़ी है। :-)

— रोबग

Answer 3

निम्नलिखित विवरण इस पृष्ठ से लिया गया है :

GetElementsByClassName () विधि निर्दिष्ट वर्ग नाम के साथ दस्तावेज़ में सभी तत्वों का एक संग्रह, एक नोडलिस्ट ऑब्जेक्ट के रूप में देता है।

नोडलिस्ट ऑब्जेक्ट नोड्स के संग्रह का प्रतिनिधित्व करता है। नोड्स को इंडेक्स नंबरों द्वारा एक्सेस किया जा सकता है। सूचकांक 0 से शुरू होता है।

टिप: आप निर्दिष्ट वर्ग नाम के साथ तत्वों की संख्या निर्धारित करने के लिए नोडलिस्ट ऑब्जेक्ट की लंबाई संपत्ति का उपयोग कर सकते हैं, फिर आप सभी तत्वों के माध्यम से लूप कर सकते हैं और इच्छित जानकारी निकाल सकते हैं।

इसलिए, एक पैरामीटर के रूप में getElementsByClassName एक वर्ग नाम स्वीकार करेगा।

यदि यह आपका HTML निकाय है:

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

फिर var menuItems = document.getElementsByClassName('menuItem')3 ऊपरी का एक संग्रह (सरणी नहीं) लौटाएगा<div> वे s का , क्योंकि वे दिए गए वर्ग के नाम से मेल खाते हैं।

आप फिर इस नोड्स ( <div>इस मामले में) के साथ संग्रह कर सकते हैं:

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

कृपया इस पोस्ट को तत्वों और नोड्स के बीच अंतर के लिए देखें ।

Answer 4

ES6Array.from() विधि प्रदान करता है, जो एक सरणी-जैसी या पुनरावृत्त वस्तु से एक नया ऐरे उदाहरण बनाता है।

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

जैसा कि आप कोड स्निपेट के अंदर देख सकते हैं, Array.from()फ़ंक्शन का उपयोग करने के बाद आप प्रत्येक तत्व पर हेरफेर करने में सक्षम हैं।

एक ही समाधान का उपयोग कर jQuery।

$('.box').css({'background':'green'});

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

Answer 5

दूसरे शब्दों में

• document.querySelector()निर्दिष्ट चयनकर्ता के केवल पहले एक तत्व का चयन करता है । तो यह एक सरणी से बाहर नहीं थूकता है, यह एक एकल मूल्य है। document.getElementById()आईडी-तत्वों को लाने के लिए समान है , क्योंकि आईडी को अद्वितीय होना चाहिए।

• document.querySelectorAll()निर्दिष्ट चयनकर्ता के साथ सभी तत्वों का चयन करता है और उन्हें एक सरणी में देता है। केवल document.getElementsByClassName()कक्षाओं और document.getElementsByTagName()टैग के लिए समान है ।

क्यों क्वेरीसेंटर का उपयोग करें?

इसका उपयोग केवल आसानी और संक्षिप्तता के एकमात्र उद्देश्य के लिए किया जाता है।

GetElement / sBy का उपयोग क्यों करें? *

तेज़ प्रदर्शन।

यह प्रदर्शन अंतर क्यों है?

चयन के दोनों तरीकों का उद्देश्य आगे उपयोग के लिए एक नोडलिस्ट बनाना है । querySelectors चयनकर्ताओं के साथ एक स्थिर NodeList बनाता है इस प्रकार इसे पहले खरोंच से बनाया जाना चाहिए।
getElement / SBY * तुरंत मौजूदा DOM के मौजूदा लाइव करता है।

तो, कब किस विधि का उपयोग करना है यह आपके / आपके प्रोजेक्ट / आपके डिवाइस पर निर्भर करता है।

infos

सभी तरीकों का डेमो
NodeList प्रलेखन
प्रदर्शन टेस्ट

Answer 6

यह Array जैसी सूची देता है।

आप उदाहरण के रूप में एक ऐरे बनाते हैं

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  

Answer 7

आप चलाकर एक भी तत्व प्राप्त कर सकते हैं

document.querySelector('.myElement').style.size = '100px';

लेकिन यह वर्ग .myElement के साथ पहले तत्व के लिए काम करने जा रहा है।

यदि आप इसे उन सभी तत्वों के लिए लागू करना चाहते हैं जो मैं आपको उपयोग करने के लिए सुझाता हूं

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});

Answer 8

/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name

Answer 9

ES5 + के साथ (आजकल कोई भी ब्राउज किया हुआ - 2017) आपको करने में सक्षम होना चाहिए

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});

Answer 10

Drenzii के विशिष्ट मामले के लिए एक उत्तर ...

आप एक ऐसा कार्यword कर सकते हैं जो किसी भी तत्व के लिए काम करेगा और जिसे आप बदलना चाहते हैं, उसकी संख्या में पास करें, जैसे:

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}

<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>