如何用JS判断标签是否含有某个类

（好久没更新了。有同学在催更了，看完毕业班辣眼睛的论文，眼睛痛，写个博文，就当休息吧。T..T）

有时候，我们需要判断标签是否含有某个类，以便采取对应的操作，比如隐藏这些标签之类的。

有如下结构：

<div id="mydiv" class="header  bar-top top-bar">
    这个是个div
</div>

如何判断它是否含有类  “top”，注意不是找“bar-top”，也不是找“top-bar”，就是找类"top"。

方法一：利用正则去检测className的值

当然首先考虑正则啦。

let mydiv = document.getElementById("mydiv");
let  re = /\btop\b/;

if( re.test(mydiv.className) ){
        console.info("有类Top");
}else{
        console.info("没有类top");
}

正则的含义就是判断有无单词“top”。很明显，div中没有top类，应该返回“没有类top”，妥妥的稳当！但是很快被事实打脸了~

WTF？

我到现在才发现正则的单词边界符，居然包含连接符（-）！！！

好嘛，为了避免这个尴尬。强烈建议写类名的时候，不要用连接符（-），不要用连接符（-），不要用连接符（-）~！！

以上的类名，可以用   top_bar 或者 topBar之类的方式替换。

但是，别人习惯了这么写，怎么办？

修改正则~！！把有连接符的情况排除掉。

let mydiv = document.getElementById("mydiv");
let  re = /(?<!-)\btop\b(?!-)/;

if( re.test(mydiv.className) ){
        console.info("有类Top");
}else{
        console.info("没有类top");
}

这里解释下： 

(?<!x)  ，表示前面不包含字符x。   ?<!   就是“前面不包含”，需要写在（）里。

(?!x)，表示后面不包含字符x。       ?!  “后面不包含”，需要写在（）里。

By the way：

(?<=x)  ，表示前面包含字符x。   ?<=   就是“前面包含”，需要写在（）里。

(?=x)，表示后面包含字符x。       ?=  “后面包含”，需要写在（）里。

方法二：利用标签的classList属性的方法contains()

突然发现标签的classList操作类，真的很方便~Nice~

contains()返回值为true，有类；返回false，没有类。

let mydiv = document.getElementById("mydiv");


if( mydiv.classList.contains("top") ){
        console.info("有类Top");
}else{
        console.info("没有类top");
}

方法三：jQuery的方法hasClass()

查找有无类的这种常见操作，jQuery早就封装好了方法hasClass()。

hasClass()返回值为true，有类；返回false，没有类。

if( $("#mydiv").hasClass("top") ){
        console.info("有类Top");
}else{
        console.info("没有类top");
}

jQuery真心强大，不过现在有被淘汰的趋势。毕竟，浏览器标准大统一的时代即将来临了。但是我相信“老兵不死”!