जावास्क्रिप्ट में कक्षा द्वारा तत्व कैसे प्राप्त करें?

Question

मैं एक HTML तत्व के भीतर सामग्री को बदलना चाहता हूं, इसलिए मैं उसके लिए निम्नलिखित फ़ंक्शन का उपयोग कर रहा हूं:

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

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

PS मैं इसके लिए jQuery का उपयोग नहीं करना चाहता।

Answer 1

यह कोड सभी ब्राउज़रों में काम करना चाहिए।

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }
}

जिस तरह से यह काम करता है वह दस्तावेज़ में सभी तत्वों के माध्यम से पाशन करता है, और इसके लिए उनकी वर्ग सूची की खोज करता है matchClass। यदि कोई मिलान पाया जाता है, तो सामग्री को बदल दिया जाता है।

jsFiddle उदाहरण, वेनिला जेएस का उपयोग (यानी कोई रूपरेखा नहीं)

Comments

+1 - रिक्त स्थान के साथ अच्छी पकड़, मैं हमेशा ऐसा करने के लिए भूल जाता हूं ... चोरी करने जा रहा हूं कि मेरे जवाब के लिए;) कक्षा हालांकि जावास्क्रिप्ट में एक आरक्षित शब्द है; भले ही यह वास्तव में कोई नुकसान न करे (फिर भी) आपको एक चर नाम के लिए इसका उपयोग नहीं करना चाहिए।

— डग नबबिट

@ उस फ़ंक्शन के साथ आपके पास उस तत्व के अंदर कोई सामग्री नहीं है जिसे आप बदलना चाहते हैं। आपके पास एक तार हो सकता है या आप इसे खाली कर सकते हैं। किसी भी तरह से रिप्लेसमेंट टेक्स्ट फंक्शन कहे जाने पर अचानक दिखाई देगा।

— टेलर

एंड्रयू, @नो - classएक चर नाम के रूप में उपयोग करना सफारी में काम नहीं करता है, इसलिए वर्तमान में इसका प्रभाव पड़ता है।

— user113716

GetElementsBytagName द्वारा लौटाए गए सरणी में एक लंबाई गुण भी होता है, जिसके लिए className / indexOf परीक्षण तब भी किया जाता है। हालांकि यह इस मामले में कोई समस्या नहीं है, लूप के लिए एक नियमित अधिक सही होगा।

— वोल्फगैंग स्टेंगल

इंडेक्सऑफ़ के बजाय रिक्त स्थान के साथ elems[i].className, कहना, var cnऔर उपयोग cn && cn.match(new RegExp("(^|\\s)" + matchClass + "(\\s|$)"))करना बेहतर काम करेगा क्योंकि यह किसी भी व्हाट्सएप (स्पेस, नॉन-ब्रेकिंग स्पेस, टैब, आदि) से मेल खाता है, जबकि प्रथम / अंतिम वर्ग के नामों का मिलान करने की अनुमति देता है। उदाहरण: jsfiddle.net/AXdtH/1636

— Supuhstar

Answer 2

बेशक, सभी आधुनिक ब्राउज़र अब निम्नलिखित सरल तरीके का समर्थन करते हैं:

var elements = document.getElementsByClassName('someClass');

लेकिन चेतावनी दी जाए कि यह IE8 या उससे पहले काम नहीं करता है। Http://caniuse.com/getelementsbyclassname देखें

इसके अलावा, सभी ब्राउज़र शुद्ध नहीं लौटेंगे NodeListजैसे कि वे माना जाता है।

आप शायद अपने पसंदीदा क्रॉस-ब्राउज़र लाइब्रेरी का उपयोग कर रहे हैं।

Comments

IE8 के लिए आप उपयोग कर सकते हैं querySelectorAll।

— ग्रास डबल

Answer 3

document.querySelectorAll(".your_class_name_here");

यह "आधुनिक" ब्राउज़रों में काम करेगा जो उस पद्धति (IE8 +) को लागू करते हैं।

function ReplaceContentInContainer(selector, content) {
  var nodeList = document.querySelectorAll(selector);
  for (var i = 0, length = nodeList.length; i < length; i++) {
     nodeList[i].innerHTML = content;
  }
}

ReplaceContentInContainer(".theclass", "HELLO WORLD");

आप पुराने ब्राउज़र के लिए समर्थन प्रदान करना चाहते हैं, तो आप की तरह एक स्टैंड-अलोन चयनकर्ता इंजन लोड कर सकता है कड़ाके की धूप (4KB मिनी + gzip) या पेप्पी (10K मिनी) और इसे करने के लिए वापस गिर अगर देशी querySelector विधि नहीं मिला है।

क्या यह एक चयनकर्ता इंजन को लोड करने के लिए ओवरकिल है ताकि आप एक निश्चित वर्ग के साथ तत्व प्राप्त कर सकें? शायद। हालाँकि, स्क्रिप्ट सभी बड़े नहीं हैं और आपको अपनी स्क्रिप्ट में कई अन्य स्थानों में उपयोगी चयनकर्ता इंजन मिल सकता है।

Comments

@ टेलर: मुझे लगता है कि यह IE8 में काम करता है (100% यकीन नहीं है - यह गूगल के लिए बहुत आलसी है)। बावजूद, मैंने थर्ड पार्टी चयनकर्ता इंजनों का उपयोग करके बैकवर्ड संगतता के बारे में कुछ जानकारी जोड़ी।

— क्रिस्टियन सांचेज

document.querySelectorIE8 और इसके बाद के संस्करण में काम करता है: caniuse.com/queryselector

— Zeke

Answer 4

एक सरल और एक आसान तरीका

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.innerHTML = 'this is value';
}

Answer 5

मुझे आश्चर्य है कि रेगुलर एक्सप्रेशंस का उपयोग करते हुए कोई उत्तर नहीं हैं। यह काफी है एंड्रयू जवाब , का उपयोग कर RegExp.testके बजाय String.indexOf, क्योंकि यह कई कार्यों के लिए बेहतर प्रदर्शन करने लगता है, के अनुसार jsPerf परीक्षण ।
यह भी IE6 पर समर्थित होने लगता है ।

function replaceContentInContainer(matchClass, content) {
    var re = new RegExp("(?:^|\\s)" + matchClass + "(?!\\S)"),
        elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (re.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

replaceContentInContainer("box", "This is the replacement text.");

यदि आप एक ही कक्षा (तों) के लिए अक्सर देखते हैं, तो आप इसे (precompiled) नियमित अभिव्यक्तियों को कहीं और संग्रहीत करके, और स्ट्रिंग के बजाय सीधे फ़ंक्शन में पास करके इसे बेहतर बना सकते हैं।

function replaceContentInContainer(reClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (reClass.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

var reBox = /(?:^|\s)box(?!\S)/;
replaceContentInContainer(reBox, "This is the replacement text.");

Answer 6

यह बहुत किसी भी ब्राउज़र में काम करना चाहिए ...

function getByClass (className, parent) {
  parent || (parent=document);
  var descendants=parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}

आपको इसे इस तरह उपयोग करने में सक्षम होना चाहिए:

function replaceInClass (className, content) {
  var nodes = getByClass(className), i=-1, node;
  while (node=nodes[++i]) node.innerHTML = content;
}

Answer 7

var elems = document.querySelectorAll('.one');

for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = 'content';
};

Comments

यह वास्तव में एक जवाब नहीं है। कृपया अपना कोड समझाने का प्रयास करें । इसके अलावा, यह मूल रूप से इस सवाल का एक और कॉम्पैक्ट संस्करण है जो 5 साल पहले पोस्ट किया गया था।

— हेल्मेट

मुझे नहीं पता कि समस्या क्या है। यह उत्तर ठीक है। कोई टिप्पणी नहीं है ... और क्या? यह सोने का नियम नहीं है। और आप यहाँ क्या टिप्पणी चाहते हैं? और लेकिन क्या यह पठनीय कोड है?

— AntiCZ

Answer 8

मुझे लगता है कि यह एक वैध विकल्प नहीं था जब यह मूल रूप से पूछा गया था, लेकिन अब आप उपयोग कर सकते हैं document.getElementsByClassName('');। उदाहरण के लिए:

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

अधिक के लिए MDN प्रलेखन देखें ।

Answer 9

मुझे कुछ ऐसा लगता है:

function ReplaceContentInContainer(klass,content) {
var elems = document.getElementsByTagName('*');
for (i in elems){
    if(elems[i].getAttribute('class') == klass || elems[i].getAttribute('className') == klass){
        elems[i].innerHTML = content;
    }
}
}

काम करेगा

Comments

यदि आपके पृष्ठ में केवल कुछ ही तत्व हैं, अन्यथा यह O (N) समाधान है

— jwl

getAttribute ('क्लास') सभी में काम करने लगता है, लेकिन IE, तो getAttribute ('className') IE में काम करता है

— KeatsKelleher

Answer 10

jQuery इस आसान को संभालता है।

let element = $(.myclass);
element.html("Some string");

यह सभी .myclass तत्वों को उस पाठ में बदलता है।

Comments

पुनश्च: सवाल कहता है "मैं इसके लिए jQuery का उपयोग नहीं करना चाहता।"

— जूलियन

ठीक है, मैंने वह नहीं देखा।

— डेनियल होफोड

Answer 11

जब कुछ तत्वों में ID की कमी होती है, तो मैं इस तरह jQuery का उपयोग करता हूं:

$(document).ready(function()
{
    $('.myclass').attr('id', 'myid');
});

यह एक अजीब समाधान हो सकता है, लेकिन शायद किसी को यह उपयोगी लगता है।

Comments

यदि कक्षा के साथ कई तत्व हैं myclass, तो वे सभी आईडी प्राप्त करेंगे myid, लेकिन आईडी अद्वितीय होनी चाहिए! इसके अलावा, ओपी स्पष्ट रूप से jQuery से बचने के लिए कहता है।

— ओरिऑल

यदि आपके पास एक ही वर्ग के कई तत्व हैं, तो foreach () क्लॉज और इंक्रीमेंट आईडी जोड़ना मुश्किल नहीं है। मैंने इस समाधान को उन लोगों के लिए एक विकल्प के रूप में जोड़ा, जो jQuery का उपयोग कर सकते हैं। ओपी को पहले से ही उपयुक्त उत्तरों का एक गुच्छा मिला है :-)

— द क्रोटेक