如何用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定义了表示和修改文档所需的 ...
随机推荐
- setInterval()与setTimeout()的区别
setInterval()-一旦被开启就会不断的执行,使用clearInterval()清除后将不再执行 setTimeout()-又称为一次定时器,定时器开启后只执行一次将不会接着执行,使用clea ...
- iOS学习——@class和#import、#include的区别
在iOS开发过程中,我们在一些源码中经常会看到导包的时候有的用#import进行导包,但是有的的时候也会看到用@class进行导包,那么这两种方式有什么区别呢? 一 @class和#import的主要 ...
- 访问iis 出现500.19错误
解决方案: 原因是asp应用程序没有打开,于是就在控制面板--程序---打开和关闭windows功能---internet信息服务----万维网服务------应用程序开发功能中选中全部 可能接下来会 ...
- python基础-循环语句(5)
一.循环语句介绍 一般情况下,需要多次重复执行的代码,都可以用循环的方式来完成 循环不是必须要使用的,但是为了提高代码的重复使用率,所以有经验的开发者都会采用循环 二.常见的循环形式 while循环 ...
- 改造kindeditor支持asp.net core mvc上传文件
kindtor默认使用的上传方法是使用目录下面的一般处理程序upload_json.ashx,暂时还不支持asp.net core下的文件上传,下面放出的自定义处理上传文件的接口方法. 自定义接收上传 ...
- mysql 开发进阶篇系列 48 物理备份与恢复(xtrabackup 的增量备份与恢复，以及备份总结)
一.增量备份概述 xtrabackup 和innobackupex 二个工具都支持增量备份,这意味着能复制自上次备份以来更改的数据.可以在每个完整备份之间执行许多增量备份,因此,您可以设置一个备份 ...
- 《C++ Primer Plus 第6版》学习笔记
第三章.基本数据类型 整形 short:至少16位 int:至少与short一样长 long:至少32位,且至少与int一样长 long long:至少64位,且至少与long一样长 字符类型 cha ...
- git在工作中的用法总结-使用篇
上一篇介绍了git的环境安装配置,本篇对git在工作中常用的用法进行总结,已满足大部分的日常工作需求,对于其他的一些git命令用法在今后使用到时我也会更新上来,文中如有错误,欢迎大家指出来,谢谢~ 一 ...
- Go基础系列：双层channel用法示例
Go channel系列: channel入门 为select设置超时时间 nil channel用法示例 双层channel用法示例 指定goroutine的执行顺序 双层通道的解释见Go的双层通道 ...
- spring-cloud-starter-gateway
********************************************************** Spring MVC found on classpath, which is i ...