如何用JavaScript判断dom是否有存在某class的值？
例如：
<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;
}
})
源码里面用到了nodeType，nodeType是HTML DOM 的nodeType 属性，nodeType 属性返回以数字值返回指定节点的节点类型。常用的一般有三种：
- 如果节点是元素节点（Element），则 nodeType 属性将返回 1。
- 如果节点是属性节点（Attr），则 nodeType 属性将返回 2。
- 如果节点是文本节点（Text），则nodeType 属性将返回 3。
例如，获得 body 元素的节点类型：
document.body.nodeType;//
如果想了解更多的节点类型，可查看：HTML DOM nodeType 属性
2.js的实现方式
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
hasClass(document.querySelector("html"), 'no-js');
想详细了解DOM选择器querySelector，可点击《原生JS强大DOM选择器querySelector与querySelectorAll》。
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") ) ;
问题地址：https://segmentfault.com/q/1010000002501794
如何用JavaScript判断dom是否有存在某class的值？的更多相关文章
- 如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）
我们部署在某些云平台或者Web服务器上的前端应用,既可以用PC端浏览器访问,也可以用手机上的浏览器访问. 在前端应用里,有时候我们需要根据运行环境的不同做出对应处理.比如下面这段逻辑,如果判断出应用当 ...
- JavaScript判断对象类型及节点类型、节点名称和节点值
一.JavaScript判断对象类型 1.可以使用typeof函数判断对象类型 function checkObject1(){ var str="str"; console.lo ...
- javascript判断节点是否在dom
在项目中碰到同事写的一段代码: //焦点必须在实时dom树中 if (ele && typeof this.document.contains === "function&q ...
- javascript针对DOM的应用
所谓针对DOM的应用.也就我这里只教大家用javascript操作页面中dom元素做交互.我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果. ...
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- JavaScript判断浏览器类型及版本
JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一 ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
随机推荐
- phpspreadsheet导出数据到Excel
之前我们使用PHP导出Excel数据时使用的是PHPExcel库,但是phpoffice已经官方宣布PHPExcel已经被废弃不在维护,推荐使用phpspreadsheet,如下图所示 我们可以通过c ...
- Shiro基础
Factory<T>接口(org.apache.shiro.util.Factory) 接口的getInstance()方法是泛型方法,可以用来创建SecurityManager接口对象 ...
- soundJs库简单使用心得
概述 由于工作需要,学习了一下soundJs库,把心得记录下来,供以后开发时参考,相信对其他人也有用. soundJs是createJs的一部分,它提供了强大的API来处理音频,是音频类H5的一个比较 ...
- Ubuntu下录制和制作Gif图片--实战版
1.背景 ubuntu下,写文章的时候,经常用到Gif图片,这个自己怎么制作呢? 网上查了一下资料,大致的流程就是:安装 录屏软件(kazam) 和 视频 转 Jpeg 的工具(mplayer) ,使 ...
- swiper在vue项目中的循环轮播bug以及点击事件
一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...
- 基于Alpha-Beta剪枝的欢乐斗地主残局辅助
2019年4月17日更新: 将搜索主函数优化为局部记忆化搜索,再次提高若干倍搜索速度 更新了main和player,helper无更新 #include "Player-v3.0.cpp&q ...
- virtualbox ubuntu 安装 openssh-server
最近为了学 DevOps,自己动手在 virtualbox 上安装 ubuntu 系统,安装完后发现好坑,没办法用 XShell 连接.在线安装 openssh-server 又发现没有配置软件源,手 ...
- Anaconda+MINGW+theano+keras安装
前言:这几天算是被这东西困扰的十分难受,博客园和csdn各种逛,找教程,大家说法不一,很多方法也不一定适用,有些方法有待进一步完善.这里我借鉴了许多大神们的方法,以及自己的一些心得,希望对你们有一些帮 ...
- 转 Mac 使用ab性能测试工具
Mac 使用ab命令进行压测 1.在Mac中配置Apache ①启动Apache,打开终端 sudo apachectl -v 如下显示Apache的版本 sudo apachectl start 这 ...
- ArcSDE数据库连接(直连、服务连)与GT_Geometry存储配置图解
众说周知,ArcSDE空间数据库引擎提供了两种连接数据库的方式.一是服务连接方式,一是直连方式.后者也是Esri所推崇的方式.但是,在客户的生产环境和开发商的开发环境中这两种方式都是有需求的.下面就以 ...