当前位置: 首页 > 编程笔记 >

基于原生js实现判断元素是否有指定class名

林炫明
2023-03-14
本文向大家介绍基于原生js实现判断元素是否有指定class名,包括了基于原生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名的情况

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍使用jquery判断一个元素是否含有一个指定的类(class)实例,包括了使用jquery判断一个元素是否含有一个指定的类(class)实例的使用技巧和注意事项,需要的朋友参考一下 在jquery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。 2 种方法如下:  1. is(‘.classname') 2. hasClass(‘class

  • 如果元素具有指定的样式类,则返回 true ;否则返回 false 。 使用 element.classList.contains() 检查元素是否具有指定的样式类。 const hasClass = (el, className) => el.classList.contains(className); hasClass(document.querySelector('p.special'),

  • 本文向大家介绍python实现判断数组是否包含指定元素的方法,包括了python实现判断数组是否包含指定元素的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了python实现判断数组是否包含指定元素的方法。分享给大家供大家参考。具体如下: python判断数组是否包含指定的元素的方法,直接使用in即可,python真是简单易懂 运行结果如下: True You will live to

  • 本文向大家介绍JavaScript判断数组是否包含指定元素的方法,包括了JavaScript判断数组是否包含指定元素的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript判断数组是否包含指定元素的方法。分享给大家供大家参考。具体如下: 这段代码通过prototype定义了数组方法,这样就可以在任意数组调用contains方法 用法: 希望本文所述对大家的javascri

  • 本文向大家介绍angularjs数组判断是否含有某个元素的实例,包括了angularjs数组判断是否含有某个元素的实例的使用技巧和注意事项,需要的朋友参考一下 也就是in_array函数,判断数组中是否含有某个元素。 使用方法: 以上这篇angularjs数组判断是否含有某个元素的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于原生JS实现图片裁剪,包括了基于原生JS实现图片裁剪的使用技巧和注意事项,需要的朋友参考一下 下面是我自己写的图片裁剪的功能介绍: 可以利用鼠标拖拉,产生裁剪框 可以改变裁剪框大小 点击确定,返回裁剪数据 原理 完成裁剪的方法有两种: 1、利用HTML5新增拖拽事件drag drop等 2、传统方法,利用鼠标事件,mousedown、mousemove等 在这里,我们采用方法2。