基于原生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 操作DOM的基本用法分享
Apr 05 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
vue3.0 上手体验
Sep 21 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获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
浅谈Python中的闭包
2015/07/08 Python
Python如何使用函数做字典的值
2019/11/30 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
中学生演讲稿
2014/04/26 职场文书
技术股东合作协议书
2014/12/02 职场文书
项目验收申请报告
2015/05/15 职场文书
运动会广播稿20字
2015/08/19 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android