कई वर्गों के साथ तत्व कैसे प्राप्त करें

Question

कहो कि मेरे पास यह है:

<div class="class1 class2"></div>

मैं इस divतत्व का चयन कैसे करूं ?

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

वह काम नहीं करता।

मुझे पता है कि, jQuery में, यह है $('.class1.class2'), लेकिन मैं इसे वेनिला जावास्क्रिप्ट के साथ चुनना चाहूंगा।

Answer 1

यह वास्तव में jQuery के समान है:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

Comments

केवल एक वर्ग के साथ तत्व प्राप्त करने के बारे में क्या है, जो कि निर्दिष्ट है @ जो

— कोडगुरु

जैसा कि मुझे याद है कि कक्षाएं “बिना” आती हैं। document.getElementsByClassName ( 'Class1 class2')

— Misha Beskin

दिए गए MDN लिंक में, getElements पैरामीटर में वर्ग के नाम से पहले डॉट का उपयोग नहीं किया जाता है। मैंने इसे फ़ायरफ़ॉक्स के साथ-साथ क्रोम पर भी चेक किया और यह बिना डॉट्स के काम किया, लेकिन डॉट्स के साथ नहीं।

— गौरव सिंह

Answer 2

और (दोनों वर्ग)

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

या (कम से कम एक वर्ग)

var list = document.querySelectorAll(".class1,.class2");

XOR (एक वर्ग लेकिन दूसरा नहीं)

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

नंद (दोनों वर्ग नहीं)

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR (दोनों वर्गों में से कोई भी नहीं)

var list = document.querySelectorAll(":not(.class1):not(.class2)");

Comments

यह शानदार है। अव्वल होना चाहिए।

— हैकस्टार

Answer 3

querySelectorAll मानक वर्ग चयनकर्ताओं के साथ भी इसके लिए काम करता है।

document.querySelectorAll('.class1.class2');

Comments

यही कारण है कि काम नहीं है, यह होने की जरूरत है करता है document.querySelectorAll('.class1, .class2');

— bazzlebrush

@bazzlebrush आपका चयनकर्ता .class1OR के साथ तत्वों को कैप्चर करेगा .class2, जबकि ऊपर वाला केवल दोनों के साथ तत्वों को कैप्चर करेगा वर्गों के और वास्तव में काम करेगा। इस परीक्षण का कंसोल आउटपुट देखें: jsfiddle.net/0ph1p9p2

— filoxo

ठीक है, मेरा बुरा, मुझे गलत समझ में आया कि ओपी क्या करना चाहता था। लेकिन IMO एक अधिक विशिष्ट उपयोग का मामला उन तत्वों का चयन करना चाहता है जिनके पास या तो वर्ग है या दोनों हैं, इस मामले में मेरा उदाहरण वह है जो आप चाहते हैं।

— bazzlebrush

Answer 4

जैसा कि @filoxo ने कहा, आप उपयोग कर सकते हैं document.querySelectorAll।

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

document.querySelector('.class1.class2');

BTW, जबकि दोनों वर्गों के .class1.class2साथ एक तत्व को इंगित करता है , (व्हाट्सएप पर ध्यान दें) एक पदानुक्रम को इंगित करता है - और वर्ग के साथ तत्व जो वर्ग के साथ एन तत्व के अंदर है : .class1 .class2class2class1

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

और यदि आप एक प्रत्यक्ष बच्चे को पुनः प्राप्त करने के लिए मजबूर करना चाहते हैं, तो >साइन ( .class1 > .class2) का उपयोग करें :

<div class='class1'>
  <div class='class2'>
    :
    :

चयनकर्ताओं के बारे में पूरी जानकारी के लिए:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Answer 5

एचटीएमएल

<h2 class="example example2">A heading with class="example"</h2>

javascritp कोड

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

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

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

https://www.w3schools.com/jsref/met_document_queryselectorall.asp के बारे में और जानें

== थैंक यू ==

Answer 6

ठीक है यह कोड वही करता है जो आपको चाहिए:

HTML:

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

जे एस:

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

आशा करता हूँ की ये काम करेगा! ;)

Answer 7

वास्तव में @bazzlebrush का जवाब और @filoxo की टिप्पणी से मुझे बहुत मदद मिली।

मुझे उन तत्वों को खोजने की आवश्यकता थी जहां कक्षा "zA yO" OR हो सकती है "zA yO" "zA zE" हो सकती है

Jquery का उपयोग करते हुए मैं पहली बार वांछित तत्वों के माता-पिता का चयन करता हूं:

('एबीसी' और शैली के साथ शुरू होने वाले वर्ग के साथ एक डिव! = 'प्रदर्शन: कोई नहीं')

var tom = $('div[class^="abc"][style!="display: none;"]')[0];                   

तब उस तत्व के वांछित बच्चे:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

अच्छी तरह से काम! ध्यान दें कि आपको document.querySelector करने की ज़रूरत नहीं है। आप पहले से चयनित ऑब्जेक्ट में पास हो सकते हैं।