【注意】以下方法只对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. #include <string.h>

    1 _memccpy 2 _memicmp 3 _strlwr 4 _strrev 5 _strset 6 _strupr 7 memccpy 8 memchr 9 memcpy 10 memicmp ...

  2. 负margin新解

    第一篇 我知道你不知道的负Margin 分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/i-know-you-do-not-know ...

  3. 泛型、注解、log4j

    泛型.注解.log4j 泛型:将运行阶段的类型错误提前到编译阶段. 声明泛型必须两端的一致,要么左面有,要么右边有,两边都有的两边必须一致. 泛型方法: static 之后 返回类型之前进行声明 泛型 ...

  4. Cocos2D-X2.2.3学习笔记8(处理精灵单击、双击和三连击事件)

    我们依据上一次介绍的触屏事件和事件队列等知识来实现触屏的单击,双击,三连击事件. 下图为我们实现的效果图: 单击精灵跳跃一个高度, 双击精灵跳跃的高度比单击的高 三连击精灵跳跃的跟高 好了,開始动手吧 ...

  5. iSCSI存储系统知识

    一.概述 SCSI 即小型计算机系统接口(Small Computer System Interface:简写:SCSI),一种用于计算机和外部设备之间(硬盘.光驱.软驱.打印机等)系统级接口的独立处 ...

  6. CAD创建不规则形状视口

    选择CAD模型空间中多段线,在指定的布局中创建视口,方法如下: /// <summary> /// 创建视口 /// </summary> /// <param name ...

  7. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

  8. asp.net 连接sqlserver数据库

    在asp.net中连接sqlserver数据库之前,首先得确保正常安装了sqlserver2008,同时有数据库. 在项目中添加一个类DB,用来专门负责执行对数据库的增删改查.在添加的过程中会弹出下面 ...

  9. JAVA 年轻代收集器 第九节

    JAVA 年轻代收集器  第九节 继续上一章所讲的,STW即GC时候的停顿时间,他会暂停我们程序中的所有线程.如果STW所用的时间长而且次数多的话,那么我们整个系统稳定性以及可用性将大大降低. 因此我 ...

  10. sqlite3插入日期时间出错解决

    正确写法 insert into hhf_records(RegistrationNumber,MachinesNumber,InDataTime,Flag,CType) values (11,1,d ...