基于原生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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
详解在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
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
实例讲解python中的序列化知识点
2018/10/08 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python开发游戏的前期准备
2019/05/05 Python
python文字转语音的实例代码分析
2019/11/12 Python
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
房地产开发计划书
2014/01/10 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
教师批评与自我批评
2014/10/15 职场文书
六一儿童节开幕词
2015/01/29 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
MySQL 字符集 character
2022/05/04 MySQL