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


Posted in Javascript onJuly 11, 2020

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

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

Javascript 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
用JavaScript调用WebService的示例
Apr 07 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 #Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 #Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 #Javascript
VSCode 配置uni-app的方法
Jul 11 #Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 #Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 #Javascript
详解JavaScript匿名函数和闭包
Jul 10 #Javascript
You might like
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
PHP文件上传主要代码讲解
2013/09/30 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python写的一个简单监控系统
2015/06/19 Python
python executemany的使用及注意事项
2017/03/13 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
2014年领班工作总结
2014/11/25 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书