基于原生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 相关文章推荐
JavaScript的漂亮的代码片段
Jun 05 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
js单例模式详解实例
Nov 21 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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
PHP出错界面
2006/10/09 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
基于python绘制科赫雪花
2018/06/22 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
岗位职责范本
2013/11/23 职场文书
物理教育专业求职信
2014/06/25 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技