如何用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定义了表示和修改文档所需的 ...
随机推荐
- 迷宫-BFS
迷宫问题 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Descript ...
- feign包名路径添加问题
1. feign包名路径添加问题 1.1. 问题 在SpringCloud中使用feign调用路径中,不能在类上直接添加@RequestMapping(value = "/hospital- ...
- 使用token和redis怎样判断账户是否失效和异地登录
思路: 将token作为value,账户的id作为key 每次登录都去redis中查询该账户的登录是否过期,没有过期则删掉原来的id,token,将新生成token作为value存入redis中.过期 ...
- socket编程(C++)
介绍 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 过程介绍 服务器端和客户端通信过程如下所示: 服务端 服务端的过程主要在该图的左侧部分,下 ...
- Linux笔记总结
标签: Linux 1. 库 库是一种可执行代码的二进制形式,可以被操作系统载入内存执行.库有两种:静态库(.a..lib)和动态库(.so..dll). a. 静态库 之所以称为[静态库],是 ...
- Ansible--Ad-Hoc
什么是Ad-Hoc (这其实是一个概念性的名字,是相对于写Ansible playbook来说的.类似于在命令行敲入shell命令和写shell scripts两者之间的关系)... 如果我们敲入一些 ...
- Spring Boot （一）快速入门
一.关于Spring Boot 在开始了解Spring Boot之前,我们需要先了解一下Spring,因为Spring Boot的诞生和Spring是息息相关的,Spring Boot是Spring发 ...
- Angular2入门：TypeScript的接口
- Jenkins入门之新建任务
简单了解了Jenkins界面之后,下面我们简单介绍一下如何使用jenkins创建一个任务.打开Jenkins web管理界面之后,点击左侧最上方的NewItem图标 便会进入如下界面 产生要输入一个构 ...
- MySQL中间件之ProxySQL(11)：链式规则( flagIN 和 flagOUT )
返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.理解链式规则 在mysql_query_rules表中,有两个特殊 ...