如何用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定义了表示和修改文档所需的 ...
随机推荐
- 《深入浅出nodejs》读书笔记（2）
概述 本来是想着学学node.js试试的,后来发现node.js才是真正的js啊,它里面用到了很多我们平时没用过的js特性,而且还非常优雅,比如它里面的异步编程思想,总之,<深入浅出node.j ...
- [Swift]枚举类型：UIBarButtonItem的24种样式
UIBarButtonSystemItemFlexibleSpace 可变空白, 在调用的过程中,使用 UIBarButtonSystemItemFlexibleSpace去占位,达到实现规范化的目 ...
- 微信公众号接入之排序问题小记 Arrays.sort()
微信公众号作为强大的自媒体工具,对接一下是很正常的了.不过这不是本文的方向,本文的方向公众号接入的排序问题. 最近接了一个重构的小项目,需要将原有的php的公众号后台系统,转换为java系统.当然,也 ...
- Core 读取配置文件
新建控制台 static void Main(string[] args) { Console.WriteLine("Hello World!"); //获取应用程序的当前工作目录 ...
- hdf 5文件格式及python中利用h5py模块读写h5文件
h5文件格式,HDF 的版本 5(HDF 版本 5不与 HDF 版本 4 及早期版本兼容)．HDF是什么呢?就是Hierarchical Data Format,可以存储不同类型的图像和数码数据的文件 ...
- git提示error setting certificate verify locations以及fatal: unable to access 的解决办法
z当使用git ------上传文件到GitHub上时!~~~出现了以下错误 :fatal: unable to access ' 可以采用以下解决方式: 修改GitHub上的地址格式=====ht ...
- web前端异步数据交互（长连接）
Workers异步任务 开始(注册): divobjx=document.getElementsByTagName("div")[0]; var workdong=new Work ...
- IdentityServer4源码颁发token分析及性能优化
IdentityServer4源码地址 IdentityModel源码地址 以下的流程用ResourceOwnerPassword类型获取token作为介绍 分两种获取形式说明 token请求地址为默 ...
- 分享一个基于web的满意度调查问卷源码系统
问卷调查系统应用于各行各业,对于企业的数据回收统计分析战略决策起到至关作用.而现有的问卷调查系统大都是在线使用并将数据保存在第三方服务器上.这种模式每年都要缴纳费用并且数据安全性得不到保证.所以说每个 ...
- mysql 开发进阶篇系列 47 物理备份与恢复(xtrabackup 的完全备份恢复，恢复后重启失败总结)
一. 完全备份恢复说明 xtrabackup二进制文件有一个xtrabackup --copy-back选项,它将备份复制到服务器的datadir目录下.下面是通过 --target-dir 指定完全 ...