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

Question

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

Answer 1

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

Answer 2

【注意】以下方法只对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 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名的情况