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

Question

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

Answer 1

【注意】以下方法只对class只有一个值的情况下操作

结构部分：

1 2 3 4 5

<div>        <p>1</p>        <p class="test">2</p>        <p>3</p> </div>

js部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var p = document.getElementsByTagName('p'); for(var i = 0;i <p.length;i++){ 　　//第一种方法，用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名的情况

 

Answer 2

如果不考虑兼容IE10以下的话，可以用HTML5中的classList API，非常方便：

1 2 3 4

var node = document.getElementById('demo'); if(node.classList.contains('test')){     console.log('包含 test 这个class'); }

兼容的方式是采用className和getAttribute('class')方法：

1 2 3 4 5 6 7 8 9 10 11

if (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 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名的情况