【注意】以下方法只对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名的几种方法的更多相关文章

  1. 函数语法:原生js判断某个元素是否有指定的class名的几种方法

    var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...

  2. 【转载】 原生js判断某个元素是否滚动到底部

    document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...

  3. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  4. js判断一个元素是否在数组中

    js判断一个元素是否在数组中 var arr = ['a','s','d','f']; console.info(isInArray(arr,'a'));//循环的方式 function isInAr ...

  5. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  6. java中把文件拷贝到指定目录下最简单几种方法

    java中把文件拷贝到指定目录下最简单几种方法   String savePath = "D:/file";// 文件保存到d盘的file目录下 File savefile = n ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. jquery and js 判断一个元素是否存在

    一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...

  9. js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

随机推荐

  1. cf-公式专场

    A. Again Twenty Five! time limit per test 0.5 seconds memory limit per test 64 megabytes input stand ...

  2. 确定比赛名次(map+邻接表 邻接表 拓扑结构 队列+邻接表)

    确定比赛名次 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  3. 六行代码获取本地IP

    uses IdIPWatch; function GetNativeIP: String; var IdIPWatch: TIdIPWatch; begin IdIPWatch := TIdIPWat ...

  4. 改动分区后,导致linux上不了

    /*************************** *Author : 林旭东    *problem:基于分区改动出现的问题(1) *calender: 15/07/10   ******** ...

  5. 并发编程: c++11 thread(Func, Args...)利用类成员函数创建线程

    c++11是VS2012后支持的新标准,为并发编程提供了方便的std::thread. 使用示例: #include <thread> void thread_func(int arg1, ...

  6. QF——OC数组

    OC中的数组: OC中的数组和它的字符串有很多相似之处.也分为可变和不可变. NSArray:不可变数组,一经初始化,便不能再更改: NSMutableArray:可变数组,它其实是继承于NSArra ...

  7. Swift 函数和类

    函数: func sayHello(personName:String,z:Int)->{ return "hello"+personName+z } print(sayHe ...

  8. 关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(2)

    功能介绍: 1.处理了动态行与表单的设值问题 2.添加了行的向上或向下排序 3.添加了可以在当前行的下边或上边增加新行的功能 4.添加了可以单选或勾选多项删除不需要的行的功能 5.添加了新增的行的高亮 ...

  9. Javascript 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

  10. php程序员的弱点

    今天在在知乎上看到一个问题,题目是<看了laravel的php框架怎么感觉很不靠谱?>,我最近也在想学习一下laravel,laravel听说是受到很大ruby on rails的影响. ...