例如：

<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. Java学习笔记二：数据类型II

    GitHub代码练习地址:https://github.com/Neo-ML/JavaPractice/blob/master/Intpractice3.java 一  Java中的数据类型 Java ...

  2. MySQL结构

    MySQL属于关系型数据库管理系统(RDBMS),使用RDBMS时,最常见的系统结构就是客户端/服务器类型(C/S类型)这种结构. 服务器指的是用来接收其他程序发出的请求,并对该请求进行相应处理的程序 ...

  3. Day8:html和css

    Day8:html和css 显示和隐藏: display: none 为 无,隐藏元素 display: block 为 显示元素 转换为块级元素 visibility: visible 显示 vis ...

  4. 深入分析Java I/O的工作机制 （一）

    此篇博客看至许令波的深入分析javaWeb内幕书籍, 此篇博客写的是自己看完之后理解的重点内容,加一些理解,希望对你有帮助. 1.Java的I/O类库的基本架构 先说一下什么是类库:可以说是类的集合, ...

  5. GIT的初级使用

    安装git [root@localhost ~]# yum -y install git [root@localhost ~]# git --version git version 1.8.3.1 初 ...

  6. C语言小笔记

    头文件的书写 头文件实现函数声明,在使用模板后可以实现一个C文件中即使重复包含某个头文件,在系统中用于只会确认为一个包含 头文件包含可以理解为将头文件内容替换#include“...”行 模板(don ...

  7. 在 .NET Core 下的 Swagger UI 自定义操作

    1.Swagger UI 是什么? Swagger UI 是一个在线的 API 文档生成与测试工具,你可以将其集成在你的 API 项目当中. 支持 API 自动同步生成文档 高度自定义,可以自己扩展功 ...

  8. sql server 索引阐述系列三 表的堆组织

    一.   概述 这一节来详细介绍堆组织,通过讲解堆的结构,堆与非聚集索引的关系,堆的应用场景,堆与聚集索引的存储空间占用,堆的页拆分现象,最后堆的使用建议 ,这几个维度来描述堆组织.在sqlserve ...

  9. [CXF REST标准实战系列] 一、JAXB xml与javaBean的转换

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. 文章Points: 1.不认识到犯错,然后得到 ...

  10. mysql开启general_log查看执行sql

    1.查看是否打开 SHOW variables like "%general_log%"; 2.打开 set global general_log=On 3.查看sql执行 tai ...