原生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名的情况

时间: 2024-10-15 13:06:22

原生js判断某个元素是否有指定的class名的几种方法的相关文章

原生js判断某个区域的滚动条滚动到了底部

原生js判断某个区域的滚动条滚动到了底部 讲解==> 关系公式:element.scrollHeight - element.scrollTop === element.clientHeight 解释:此公式可以用于判断是否滚动到底 你必须知道这个方法 可以判断滚动条滚动到了底部哈! element.scrollHeight 是获取这个元素区域的实际高度(包含被隐藏起来的高度) element.scrollTop是获取滚动条距离顶部的实际距离(包含被隐藏起来的高度) element.client

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

原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 var transitions = { 'transition':'tra

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复

js判断某个元素是否存在

一.使用jQuery只需判断此元素的长度是否为0,如果为0则此元素不存在,代码如下: if ($("#demo").length > 0){     // 如果存在id为demo的元素,则执行此块代码 } else{ //否则执行此块代码 } 二.原生javascript方法 if(document.getElementById('demo')) {         // 如果存在id为demo的元素,则执行此块代码 } else {         //否则执行此块代码}

【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果A没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复制了a,为啥修改数组a,数组b也跟着变了,这里我不

Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法

上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~ 静态方法,属于类的方法,即类可以直接调用的方法.为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态

js判断文件类型是否是指定格式

功能说明:js实现判断文件类型,图片‘视频等格式,当不符合格式时,会自动清除,并重新选择.’ 1..图片.视频等格式判断,直接上代码 <script type="text/javascript">//1.这个函数是,判断图片格式--------------------------------------------------------------------function checkImg(){var img_id=document.getElementById('m

利用原生JS判断组合键

<script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = function(e){ var evn = e||event; var code = evn.keyCode||evn.which||evn.charCode; if(code==13){ isEnt = 1; } if(code==18){ isAlt = 1; } // 判读Alt+Enter组合键 if

原生js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl