Проверить, содержит ли элемент класс в JavaScript?

Question

Используя простой JavaScript (не jQuery), есть ли способ проверить, содержит ли элемент класс?

В настоящее время я делаю это:

var test = document.getElementById("test");
var testClass = test.className;

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  case "class2":
    test.innerHTML = "I have class2";
    break;
  case "class3":
    test.innerHTML = "I have class3";
    break;
  case "class4":
    test.innerHTML = "I have class4";
    break;
  default:
    test.innerHTML = "";
}

<div id="test" class="class1"></div>

Проблема заключается в том, что если я изменю HTML-код на этот ...

<div id="test" class="class1 class5"></div>

... точного соответствия больше нет, поэтому я получаю вывод по умолчанию ничего ("").Но я все еще хочу, чтобы вывод был I have class1, потому что <div> все еще содержит .class1 класс.

Answer 1

Для меня самый элегантный и быстрый способ добиться этого:

function hasClass(el,cl){
   return !!el.className && !!el.className.match(new RegExp('\\b('+cl+')\\b'));
}

Answer 2

в каком элементе в настоящее время находится класс .bar? Вот еще одно решение, но оно зависит от вас.

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddle demo

Конечно, это только поиск для 1 простого элемента <img> (/Image/g), но вы можете поместить все в массив, как <li> is /LI/g, <ul> = /UL/g и т. Д.

Answer 3

Попробуйте это:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};