原生js判断某个元素是否有指定的class名的几种方法

Question

原生js判断某个元素是否有指定的class名的几种方法

Answer 1

【注意】以下方法只对class只有一个值的情况下操作结构部分：12345<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>1</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;class="test">2</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>3</p></div>js部分：123456789101112131415var&nbsp;p&nbsp;=&nbsp;document.getElementsByTagName('p');for(var&nbsp;i&nbsp;=&nbsp;0;i&nbsp;<p.length;i++){　　//第一种方法，用classList这个H5&nbsp;API，有兼容性问题　　if(p[i].classList.contains('test')==true){　　　　　　&nbsp;&nbsp;&nbsp;&nbsp;console.log(p[i].innerHTML);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;　　}&nbsp;&nbsp;&nbsp;&nbsp;//第二种方法，用className这个属性&nbsp;&nbsp;&nbsp;&nbsp;if(p[i].className=='test'){　　　　&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(p[i].innerHTML)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;//第三种方法，用getAttribute()这个方法&nbsp;&nbsp;&nbsp;&nbsp;if(p[i].getAttribute("class")=='test'){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;　　console.log(p[i].innerHTML);&nbsp;&nbsp;&nbsp;&nbsp;}}以上三种可以任选，条件是不考虑兼容性和多个class名的情况&nbsp;

Answer 2

如果不考虑兼容IE10以下的话，可以用HTML5中的classList API，非常方便：1234var&nbsp;node&nbsp;=&nbsp;document.getElementById('demo');if(node.classList.contains('test')){&nbsp;&nbsp;&nbsp;&nbsp;console.log('包含&nbsp;test&nbsp;这个class');}兼容的方式是采用className和getAttribute('class')方法：1234567891011if&nbsp;(node.getAttribute('class'))&nbsp;{&nbsp;&nbsp;//&nbsp;存在class属性&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;方式1&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.getAttribute('class').indexOf('test')&nbsp;>&nbsp;-1)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('包含&nbsp;test&nbsp;这个class');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;方式2&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.className.indexOf('test')&nbsp;>&nbsp;-1)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('包含&nbsp;test&nbsp;这个class');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}&nbsp;

Answer 3

//第一种方法，用classList这个H5 API，有兼容性问题if(p[i].classList.contains('test')==true){console.log(p[i].innerHTML);}//第二种方法，用className这个属性if(p[i].className=='test'){console.log(p[i].innerHTML)}//第三种方法，用getAttribute()这个方法if(p[i].getAttribute("class")=='test'){console.log(p[i].innerHTML);}}以上三种可以任选，条件是不考虑兼容性和多个class名的情况