例如：

<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 属性返回以数字值返回指定节点的节点类型。常用的一般有三种：

  1. 如果节点是元素节点（Element），则 nodeType 属性将返回 1。
  2. 如果节点是属性节点（Attr），则 nodeType 属性将返回 2。
  3. 如果节点是文本节点（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

说明下：

  1. 字符串的indexOf方法是无法区分.no-js和.no-js-indeed这样的类；
  2. 类名的分隔符可能不是空格，还有可能是\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的值？的更多相关文章

  1. 如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

    我们部署在某些云平台或者Web服务器上的前端应用,既可以用PC端浏览器访问,也可以用手机上的浏览器访问. 在前端应用里,有时候我们需要根据运行环境的不同做出对应处理.比如下面这段逻辑,如果判断出应用当 ...

  2. JavaScript判断对象类型及节点类型、节点名称和节点值

    一.JavaScript判断对象类型 1.可以使用typeof函数判断对象类型 function checkObject1(){ var str="str"; console.lo ...

  3. javascript判断节点是否在dom

    在项目中碰到同事写的一段代码: //焦点必须在实时dom树中 if (ele && typeof this.document.contains === "function&q ...

  4. javascript针对DOM的应用

    所谓针对DOM的应用.也就我这里只教大家用javascript操作页面中dom元素做交互.我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果. ...

  5. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  6. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  7. JavaScript判断浏览器类型及版本

    JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一 ...

  8. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  9. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

随机推荐

  1. css3动画：transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  2. NuGet 构建服务器与常用命令

    公司出于某些原因需要自己在内部网络搭建一个私有的 Nuget 服务器,而且要运行在 Linux服务器上面.如果说 Windows 下搭建的话很简单,直接在项目当中引入 Nuget 的库就 OK,这儿的 ...

  3. Java IO API记录

    文件路径: public static final String FILEPATH= File.separator+"Users"+ File.separator+"xu ...

  4. iOS逆向开发（0）：修改二进制代码与重签名 | hopper | codesigh

    小白:小程,你知道有些iOS程序是没人性的吗?老是不按我的意愿来运行! 小程:我怎么知道你的意愿就是有人性的? 本文解决一个问题:修改别人的二进制程序并运行起来. 让别人的程序按你的意愿来运行,文明一 ...

  5. web进修之—Hibernate 类型（4）

    本片包含Hibernate的两种类型的简单介绍和集合类型的映射. Hibernate中的两种类型: Entity 自己掌控自己的生命周期,比如Person有addrss属性(关联到另外一张表).age ...

  6. for循环中let与var的区别，块级作用域如何产生与迭代中变量i如何记忆上一步的猜想

    我在前一篇讨论let与var区别的博客中,顺带一笔带过了let与var在for循环中的不同表现,虽然解释了是块级作用域的影响,但具体是怎么去影响的呢,我尝试的去理解了下,这篇博客主要从for循环步骤拆 ...

  7. shell脚本示例：计算毫秒级、微秒级时间差

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 有时候需要计算命令的执行时间长度,可以使用time命令,虽然t ...

  8. 闪电侠 Netty 小册里的骚操作

    前言 即使这是一本小册,但基于"不提笔不读书"的理念,仍然有必要总结一下.此小册对于那些"硬杠 Netty 源码 却不曾在千万级生产环境上使用实操"的用户非常有 ...

  9. [转]php中 curl模拟post发送json并接收json

    本文转自:https://blog.csdn.net/pangchengyong0724/article/details/52103962 本地模拟请求服务器数据,请求数据格式为json,服务器返回数 ...

  10. Dapper批量更新

    本次示例项目使用Dappe1.50.5和Dapper.Contrib1.50.5 数据库执行的脚本检测工具是SQL Server Prifiler 1.使用Where In 实现批量更新 1.1代码如 ...