DOM
सीएसएस वर्गों की एक सूची में हेरफेर

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

document.getElementById("link1").className += " foo";
document.getElementById("link2").className += " foo bar";

कई तत्वों के लिए, आपको एक लूप के अंदर वर्ग के नाम जोड़ने होंगे

var els = document.getElementsByClassName("foo"),
  indx = els.length;
while (indx--) {
  els[indx].className += " bar baz";
}

एक एकल श्रेणी का नाम एक स्ट्रिंग के रूप में जोड़ा जा सकता है। कई वर्ग के नाम जोड़ने के लिए, ES6 के प्रसार ऑपरेटर का उपयोग करें:

document.querySelector("#link1").classList.add("foo");
document.querySelector("#link2").classList.add(...['foo', 'bar']);

कई तत्वों के लिए, आपको एक लूप के अंदर वर्ग के नाम जोड़ने होंगे

document.querySelectorAll(".foo").forEach(el => {
  el.classList.add(...['bar', 'baz']);
});

एक तत्व से एक वर्ग को हटाने के लिए className गुण का थोड़ा हेरफेर करने की आवश्यकता होती है।

var toRemove = "bar",
  el = document.getElementById("link1");
el.className = el.className.replace(new RegExp("\\b" + toRemove + "\\b", "g"), "").trim();

कई वर्ग नामों को हटाने के लिए एक लूप की आवश्यकता होगी। शेष उदाहरण कार्य को अलग करने के लिए एक फ़ंक्शन का उपयोग करेंगे

function removeClass(el, name) {
  name = name.split(/\s+/);
  var index = name.length,
    classes = el.className;
  while (index--) {
    classes = classes.replace(new RegExp("\\b" + name[index] + "\\b", "g"), "").trim();
  }
  el.className = classes;
}
var el = document.getElementById("link1");
removeClass(el, "bar baz");

हटाने के लिए कई वर्ग के नाम के साथ कई तत्वों को दो छोरों की आवश्यकता होगी

function removeClass(els, name) {
  name = name.split(/\s+/);
  var regex, len,
    index = name.length;
  while (index--) {
    regex = new RegExp("\\b" + name[index] + "\\b", "g");
    len = els.length;
    while (len--) {
      els[len].className = els[len].className.replace(regex, "").trim();
    }
  }
}
var els = document.getElementsByTagName("a");
removeClass(els, "bar baz");

एक एकल श्रेणी का नाम एक स्ट्रिंग के रूप में हटाया जा सकता है। कई वर्ग नामों को निकालने के लिए, ES6 के प्रसार ऑपरेटर का उपयोग करें:

document.querySelector("#link1").classList.remove("foo");
document.querySelector("#link2").classList.remove(...['foo', 'bar']);

कई तत्वों के लिए, आपको एक लूप के अंदर वर्ग के नाम हटाने होंगे

document.querySelectorAll(".foo").forEach(el => {
  el.classList.remove(...['bar', 'baz']);
});

यदि किसी तत्व में एक वर्ग होता है, तो परीक्षण करने के लिए className संपत्ति के हेरफेर की थोड़ी आवश्यकता होती है। यह उदाहरण वर्ग के लिए परीक्षण करने के लिए एक सरणी विधि का उपयोग कर रहा है।

function hasClass(el, name) {
  var classes = (el && el.className || "").split(/\s+/);
  return classes.indexOf(name) > -1;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

कई वर्ग नामों के लिए परीक्षण के लिए एक लूप की आवश्यकता होगी।

function hasClass(el, name) {
  name = name.split(/[\s.]+/);
  var hasClass = true,
    classes = (el && el.className || "").split(/\s+/),
    index = name.length;
  while (index--) {
    hasClass = hasClass && classes.indexOf(name[index]) > -1;
  }
  return hasClass;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

.indexOf() का उपयोग करने के बजाय, आप एक नियमित अभिव्यक्ति का उपयोग करने पर भी विचार कर सकते हैं।

function hasClass(el, name) {
  return new RegExp("\\b" + name+ "\\b").test(el.className);
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

एकल वर्ग नाम के लिए परीक्षण निम्नानुसार किया जाता है:

var hasClass = document.querySelector("#link1").classList.contains("foo");

कई वर्ग नामों के लिए, matches का उपयोग करना आसान है। वर्ग चयनकर्ता के उपयोग पर ध्यान दें; चयनकर्ता कोई भी वैध स्ट्रिंग चयनकर्ता (आईडी, विशेषता, छद्म कक्षाएं, आदि) हो सकता है।

var hasClass = document.querySelector("#link1").matches('.foo.bar');
var hasClass = document.querySelector("#link2").matches('a.bar[href]');