编程 Javascript

如何用js判断dom是否有存在某class的值

Posted in Javascript onFebruary 13, 2017

例如：

<html class="no-js">
<head>
</head>
<body>
</body>
</html>

判断html节点的class是否有no-js。

1.jquery的实现方式

$("html").hasClass('no-js');

jquery源码的实现方式：

var rclass = /[\t\r\n\f]/g;
jQuery.fn.extend({
 hasClass: function(selector) {
  var className = " " + selector + " ",
   i = 0,
   l = this.length;
  for (; i < l; i++) {
   if (this[i].nodeType === 1 &&
    (" " + this[i].className + " ").replace(rclass, " ").indexOf(className) > -1) {
    return true;
   }
  }
  return false;
 }
})

2.js的实现方式

function hasClass(element, cls) {
 return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
hasClass(document.querySelector("html"), 'no-js');

3.H5的classList

说明下：

字符串的indexOf方法是无法区分.no-js和.no-js-indeed这样的类；
类名的分隔符可能不是空格，还有可能是\t等。

代码：

var hasClass = (function(){
 var div = document.createElement("div") ;
 if( "classList" in div && typeof div.classList.contains === "function" ) {
  return function(elem, className){
   return elem.classList.contains(className) ;
  } ;
 } else {
  return function(elem, className){
   var classes = elem.className.split(/\s+/) ;
   for(var i= 0 ; i < classes.length ; i ++) {
    if( classes[i] === className ) {
     return true ;
    }
   }
   return false ;
  } ;
 }
})() ;
alert( hasClass(document.documentElement, "no-js") ) ;

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

如何用js判断dom是否有存在某class的值

- Author -

孟然

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript生成/解析dom的CDATA类型的字段的代码

Apr 22 Javascript

按给定几率进行随机抽取的js代码

Dec 28 Javascript

JavaScript的arguments对象应用示例

Sep 15 Javascript

Javascript中this关键字的一些小知识

Mar 15 Javascript

jquery图片切换实例分析

Apr 15 Javascript

理解javascript异步编程

Jan 27 Javascript

Vue组件全局注册实现警告框的实例详解

Jun 11 Javascript

详解微信小程序与内嵌网页交互实现支付功能

Oct 22 Javascript

vue.js实现简单的计算器功能

Feb 22 Javascript

javascript设计模式 ? 组合模式原理与应用实例分析

Apr 14 Javascript

简单了解JavaScript作用域

Jul 31 Javascript

vue Cli 环境删除与重装教程 - 版本文档

Sep 11 Javascript

AngularJS学习第一篇 AngularJS基础知识

Feb 13 #Javascript

详解Javascript中DOM的范围

Feb 13 #Javascript

JS简单判断函数是否存在的方法

Feb 13 #Javascript

浅谈js中的变量名和函数名重名

Feb 13 #Javascript

学习使用jQuery表单验证插件和日历插件

Feb 13 #Javascript

js实现打地鼠小游戏

Feb 13 #Javascript

canvas实现钟表效果

Feb 13 #Javascript