原生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名的情况
原生js判断某个元素是否有指定的class名的几种方法的更多相关文章
- 函数语法:原生js判断某个元素是否有指定的class名的几种方法
var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...
- 【转载】 原生js判断某个元素是否滚动到底部
document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- js判断一个元素是否在数组中
js判断一个元素是否在数组中 var arr = ['a','s','d','f']; console.info(isInArray(arr,'a'));//循环的方式 function isInAr ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- java中把文件拷贝到指定目录下最简单几种方法
java中把文件拷贝到指定目录下最简单几种方法 String savePath = "D:/file";// 文件保存到d盘的file目录下 File savefile = n ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- jquery and js 判断一个元素是否存在
一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
随机推荐
- hdu 5583 Kingdom of Black and White(模拟,技巧)
Problem Description In the Kingdom of Black and White (KBW), there are two kinds of frogs: black fro ...
- android混淆打包配置(忽略第三方jar)
在project.properties里加上 proguard.config=proguard.cfg proguard.cfg 配置如下: -optimizationpasses 5-dontu ...
- JAVA装饰器模式
Java程序员们应该对java.io对不会陌生,因为java.io包采用了装饰器模式. 一.定义: Decorator装饰器,顾名思义,就是动态地给一个对象添加一些额外的职责,就好比为房子进行装修一样 ...
- CSS3 简易照片墙
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
- vs2010打开设计器出现错误
vs2010打开设计器出现此界面, 错误多种,还有“未将对象引用设置到对象的实例” ,我项目用到了第三方控件(没有安装,bin文件夹导入DLL文件,项目直接引用的DLL文件),看下面的堆栈信息,显 ...
- input模糊搜索功能
<!doctype html> <meta charset="utf-8"> <style type="text/css"> ...
- 学习Javascript DOM 编程艺术的一点心得
最近又看了一遍JS DOM编程艺术,照例来写一写读后感. 其实,我从中学到最深的是几个概念:1.平稳退化.当浏览器并不支持JS的时候网页的基本核心功能是还可以用的:2.逐渐增强.在原始的信息层上用其他 ...
- MySql Error 2006
导入长字段时出现2006错误 在my.ini最后添加 max_allowed_packet = 10M 问题解决. max_allowed_packet 参数的作用是,用来控制其通信缓冲区的最大长度.
- C#开发者通用性代码审查清单
这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...
- struts2笔记08-初识ActionSupport
1.配置一个最简单的action <action name="simple-action"> <result>/simple.jsp</result& ...