如何在JavaScript中检查多个类元素的类，而不使用jQuery

Question

我有以下javascript代码，可以将上传者名称放在上传日期和观看次数之前，在Youtube搜索结果中显示。

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var elems = document.getElementsByClassName('yt-lockup-meta-info');
var elemss = document.getElementsByClassName('yt-uix-sessionlink g-hovercard spf-link');
var elemsss = 1;
var elemssss = 0;
var myElem = document.getElementById('sb-button-notify');
if (myElem == null) elemsss = 0; // these two lines are here to skip the additional element
                                 // that is only there if you are logged in
for (var i = 0; i < elems.length; ++i) {
  if (hasClass(elemss[i+elemsss],'yt-uix-tile-link'))
    {elemssss=elemssss+1;elemsss=elemsss+3;alert('damn');}
elems[i+elemssss].insertBefore(elemss[i+elemsss],elems[i+elemssss].firstChild);}

如果我想检查一个具有多个类的元素的整个 class 属性，而不是使用 hasClass 函数，该怎么办？以下方法行不通：

element.className=='yt-uix-sessionlink yt-uix-tile-link 
                    yt-ui-ellipsis yt-ui-ellipsis-2 g-hovercard spf-link'

我只需要检查类，这样代码就可以跳过具有特定类的元素。更好的解决方案是替代document.getElementsByClassName，它只会获取具有完全给定类的元素，并忽略具有更多类的元素。

- Kovács János

Answer 1

element.classList

它会返回元素上所有类的数组，例如["site-icon", "favicon", "favicon-stackoverflow"]，然后通过使用普通的JavaScript，您可以实现自己的hasClass功能。

因此，您的hasClass函数变成了

function hasClass(element, cls){
  return element.classList.contains(cls);
}

- vinayakj

---

为什么要给差评呢？至少留个评论，这样我也能理解一下。 - vinayakj

顺便提一下，element.classList 目前的支持有些欠缺。 - user4639281

@vinayakj 就我个人而言，我认为你的回答很好，我已经点赞了。 - Maximillian Laumeister

@TinyGiant 在除了IE9之外的所有浏览器中工作似乎是相当不错的支持，而且你总是可以使用shim使其在IE7、8和9中工作。 - Maximillian Laumeister

你有一个名为List的className，同时你也有确切的类，所以只需使用length属性和contains函数进行比较即可。 - vinayakj

Answer 2

您可以使用classList，但并非所有浏览器都支持。

我认为最好的解决方案是这样的：

function hasClass (element, cls) {
    var classes = element.className.split(' ');
    return classes.indexOf(cls) != -1;
}

- DavidVollmers