例如：

<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. 折腾nock给jsonp进行单元测试

    概述 前几天学习用Jest和nock.js对异步api进行单元测试.在项目中,我用到了jsonp,自然想到对jsonp进行单元测试. 过程很折腾,结果很有趣. jsonp.js 首先axios或者fe ...

  2. react中的refs

    概述 很久之前就知道refs,感觉好神秘,恰好今天突然发现字符串形式的ref在官网不推荐使用了,于是好好总结一下ref的用法,供以后开发时参考,相信对其他人也有用. 参考资料: Refs & ...

  3. Source优化

    优化Source主要包括以下几方面: 1 优化sqlquery 在mapping中,通常会在Source Qualifier组件中使用sqlquery读取数据,则优化通常包括以下几点: 1)  如果在 ...

  4. iOS学习——iOS开发小知识点集合

    在iOS学习和开发过程中,经常会遇到一些很小的知识点和问题,一两句话就可以解释清楚了,这样的知识点写一篇随笔又没有必要,但是又想mark一下,以备不时之需,所以就有了本文.后面遇到一些小的知识点会不断 ...

  5. 【spring】从简单配置使用到深入

    一.使用前的配置 1.maven引入需要的jar包 <properties> <spring.version>4.1.6.RELEASE</spring.version& ...

  6. [NOI2009] 管道取珠

    sum a[i]*a[i]可以理解为两个独立但同时进行的游戏得到同一个输出序列的方案数. 设f[l,i,j]为每个游戏都已经推出了l个珠子时,第一个游戏里上边儿的管道已经推出了i个,第二个游戏中上边儿 ...

  7. linux性能优化参数小节

    总结一些和性能相关的常见参数 内核相关参数 位于/etc/sysctl.conf文件,向文件中添加 用sysctl -a可以查看默认配置 修改后可以通过sysctl -p执行并看看有没有错误 例如设置 ...

  8. 项目ITP(五) spring4.0 整合 Quartz 实现任务调度

    前言 系列文章:[传送门] 项目需求: 二维码推送到一体机上,给学生签到扫描用.然后需要的是 上课前20分钟 ,幸好在帮带我的学长做 p2p 的时候,接触过.自然 quartz 是首选.所以我就配置了 ...

  9. Linux命令行文本工具

    浏览文件 cat 查看文件内容 more 以翻页形式查看文件内容(只能向下翻页) less 以翻页形式查看文件内容(可以上下翻页) head 查看文件的头几行(默认10行) tail 查看文件的尾几行 ...

  10. Netty源码分析（五）：EventLoop

    上一篇主要介绍了一下EventLoopGroup,本篇详细看下它的成员EventLoop. 类结构 NioEventLoop继承自SingleThreadEventLoop,而SingleThread ...