DOM
CSS 클래스 목록 조작하기

요소에 클래스를 추가하는 간단한 방법은 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 을 사용하는 것이 더 쉽습니다. 클래스 선택기의 사용에 유의하십시오. selector는 유효한 문자열 선택자 (id, attribute, pseudo-class 등)가 될 수 있습니다.

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