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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js判断元素是否隐藏的方法

    复制代码 代码如下: if( document.getElementById("div").css("display")==='none') if( document.getElementById("div").css("display")==='block') $("#div").is(":hidden"); // 判断是否隐藏 $("#div").is("

  • javascript判断元素存在和判断元素存在于实时的dom中的方法

    今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误. 我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样: if ($('#a')) { // some code ... $('#b').doSomething; // so

  • JS实现判断数组是否包含某个元素示例

    JS实现判断数组是否包含某个元素示例

    本文实例讲述了JS实现判断数组是否包含某个元素.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> Array.prototype.S = String.fromC

  • JS判断数组里是否有重复元素的方法小结

    本文实例讲述了JS判断数组里是否有重复元素的方法.分享给大家供大家参考,具体如下: 第一种方法:但是下面的这种方法数字字符串类似相同,返回的还是真,有点不靠谱,如果是其它的字符是可以的 var ary11 = new Array("1", "ff", "11", "aa", "2222"); // 验证重复元素,有重复返回true:否则返回false function mm(a) { return /(\x

  • JS判断指定dom元素是否在屏幕内的方法实例

    JS判断指定dom元素是否在屏幕内的方法实例

    前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原理.下面直入主题. 我们通过浏览器在浏览一个网页时候是这个样子的,如图所示 页面的长宽,以及各dom的坐标都是静止的,动的是显示窗口坐标而已.所以明白了这个,那么判断一个dom元素是否可见时,就十分简单了. 我们需要知道三个坐标就可知道当前dom是否在可见区域内,分别是 显示窗口的顶部坐标 显示窗口的底部坐标 dom元素

  • JS判断元素是否在数组内的实现代码

    一.JQuery 如果是用JQuery的话,可以用inArray()函数: jquery inarray()函数详解 jquery.inarray(value,array) 确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index of the first parameter in the array (-1 if not found). 返回值 jquery 参数 value (any) : 用于在数组中查找是否存在 array (array) :

  • JavaScript判断数组是否包含指定元素的方法

    本文实例讲述了JavaScript判断数组是否包含指定元素的方法.分享给大家供大家参考.具体如下: 这段代码通过prototype定义了数组方法,这样就可以在任意数组调用contains方法 /** * Array.prototype.[method name] allows you to define/overwrite an objects method * needle is the item you are searching for * this is a special variab

  • js 判断一个元素是否在页面中存在

    1. 判断表单元素是否存在(一) 复制代码 代码如下: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->if("periodPerMonth" in document.theForm) { return true; } else{ return false; } 2. 判断页面元素是否存在 复制代码 代码如下: if(document

  • 判断数组是否包含某个元素的js函数实现方法

    判断数组是否包含某个元素的js函数实现方法 Array.prototype.contains = function(obj) { var i = this.length; while (i--) { if (this[i] === obj) { return true; } } return false; } 或 Array.prototype.contains = function(element) { for (var i = 0; i < this.length; i++) { if (t

  • 基于原生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

  • 基于原生JS封装的Modal对话框插件的示例代码

    基于原生JS封装Modal对话框插件,具体内容如下所示: 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ModalPlugin({ //提示的标题信息 title:'系统提示', //内容模板 字符串 /模板字符串/DOM元素对象 template:null, //自定义按钮信息 buttons:[{ //按钮文字 text:'确定', click(){ //this:当前实例 }

  • 基于原生JS实现分页效果的示例代码

    基于原生JS实现分页效果的示例代码

    这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的效果 首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o

  • 基于原生js运动方式关键点的总结(推荐)

    主要方法:定时器的运用 setInterval(funnction(){},30); 为了避免最后时刻速度即将停止时的误差,可以采用下面的方法: if(iSpeed<1)//速度足够小的时候,让速度直接为0,避免速度的波动 { iSpeed = 0; } 绝对值的运用(主要运用于弹性运动等速度有正负的情况): Math.abs(2.5)// 2 弹性运动和摩擦力的组合: iSpeed+=(iTarget-obj.offsetLeft)/5; iSpeed*=0.7; 模拟摩擦力: iSpeed*

  • 通过原生JS实现为元素添加事件的方法

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.

  • 基于原生js实现九宫格算法代码实例

    九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols); 列 col=parseInt(i%cols); i是当前的盒子,cols是总列数, 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

  • 基于原生js淡入淡出函数封装（兼容IE）

    在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法.但是我们的目的不只是会用,而是理解程序底层的逻辑.这篇文章主要就是利用原生的javascript实现淡入淡出的效果. 构建框架,基本没难度. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度函数的封装</title> <style type

  • 详解基于原生JS验证表单组件xy-form

    原生form表单 form 表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如 require . minlength . maxlength ,还有各种类型的 input ,比如 type=email 可以校验是否是邮箱类型,如果不满足还可以使用 pattern 进行正则校验. 原生的表单验证大概如下 虽然丑陋,功能却很强大,基本可以满足一般的需求,不过ui终究过于原生,而且也不方便自定义,所以很多情况下这种默认的表单验证并不使用. 下面来看看 xy-form 下的效果

  • 基于原生JS实现图片裁剪

    基于原生JS实现图片裁剪

    下面是我自己写的图片裁剪的功能介绍: 可以利用鼠标拖拉,产生裁剪框 可以改变裁剪框大小 点击确定,返回裁剪数据 原理 完成裁剪的方法有两种: 1.利用HTML5新增拖拽事件drag drop等 2.传统方法,利用鼠标事件,mousedown.mousemove等 在这里,我们采用方法2. 裁剪区域的形成 要进行裁剪首先要形成裁剪区域,这个裁剪区域的形成我们可以与鼠标移动的距离相关联.鼠标移动多远,裁剪区域就有多大.如下图: 如上图所示鼠标的横向移动距离与纵向移动距离共同组成了裁剪区域的宽和高.

  • 使用原生JS获取select元素选中的value和text值

    使用原生JS获取select元素选中的value和text值

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>select元素</title> </head> <body id="bodyform"> &l

随机推荐