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

更新时间：2020年07月11日 11:39:08 作者：小猿笔记

这篇文章主要介绍了基于原生js实现判断元素是否有指定class名,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

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

您可能感兴趣的文章:

微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
这篇文章主要介绍了微信小程序学习笔记之跳转页面、传递参数获得数据操作,结合实例形式分析了微信小程序基于navigator组件的页面跳转及数据传递相关操作技巧,并结合图文形式进行详细说明,需要的朋友可以参考下
2019-03-03
微信小程序开发之选项卡(窗口底部TabBar)页面切换
本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
javascript跨域方法、原理以及出现问题解决方法（详解）
javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。跨域简单的理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象
2015-08-08
js微信支付实现代码
这篇文章主要为大家详细介绍了javascript微信支付的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JavaScript中5个重要的Observer函数小结
浏览器为开发者提供了功能丰富的Observer,本文主要介绍了JavaScript中5个重要的Observer函数小结,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
javascript相关事件的几个概念
对于事件来讲，首先，我们需要了解这样几个概念：事件；事件处理程序；事件类型；事件流；事件冒泡；事件捕获；事件对象；事件方面的性能优化（事件委托、移除事件处理程序）；常见的浏览器兼容问题。
2015-05-05
vite添加环境变量import.meta.env的方法
在不同的文件里面配置不同的环境变量,可以让我们的配置更加容易维护和使用,这里我们说下vite配置环境变量和模式是怎么配置的,对vite环境变量相关知识感兴趣的朋友跟随小编一起看看吧
2023-10-10
JavaScript数据绑定实现一个简单的 MVVM 库
MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心DOM 操作。接下来通过本文给大家介绍JavaScript使用数据绑定实现一个简单的 MVVM 库，感兴趣的朋友一起学习吧
2016-04-04
javascript 实现的多浏览器支持的贪吃蛇webgame
兼容FF IE的javascript版贪吃蛇游戏，非常厉害的高手。
2008-01-01
基于javascript实现图片切换效果
这篇文章主要介绍了基于javascript实现图片切换效果的相关资料,需要的朋友可以参考下
2016-04-04