基于原生js实现判断元素是否有指定class名

(编辑:jimmy 日期: 2024/12/28 浏览:2)

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

结构部分:

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

js部分:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。