编程 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 相关文章推荐

Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据

Mar 16 Javascript

基于JQuery的Select选择框的华丽变身

Aug 23 Javascript

jquery子元素过滤选择器使用示例

Jun 24 Javascript

JS中for循序中延迟加载动态效果的具体实现

Aug 18 Javascript

jQuery切换网页皮肤并保存到Cookie示例代码

Jun 16 Javascript

jQuery选择器源码解读（六）：Sizzle选择器匹配逻辑分析

Mar 31 Javascript

JavaScript 数组的深度复制解析

Nov 02 Javascript

详解Angular的8个主要构造块

Jun 20 Javascript

node实现分片下载的示例代码

Oct 17 Javascript

es6基础学习之解构赋值

Dec 10 Javascript

浅谈Node 异步IO和事件循环

May 05 Javascript

使用JS location实现搜索框历史记录功能

Dec 23 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