例如：

<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. Docker学习笔记-Redis 安装

    拉取官方的镜像 docker pull redis:3.2 查看 docker images redis 运行容器 docker run -p 6379:6379 -v $PWD/data:/data ...

  2. CSS3新增伪类--好用的:target

      问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用cs ...

  3. OAuth2简易实战（四）-Github社交联合登录

    1. OAuth2简易实战(四)-Github社交联合登录 1.1. 用到的第三方插件 https://github.com/spring-projects/spring-social-github ...

  4. php内核之HashTable

    Zend 把与 HashTable 有关的 API 分成了好几类以便于我们查找,这些 API 的返回值大多都是常量SUCCESS 或者 FAILURE. 初始化 HashTable 下面在介绍函数原型 ...

  5. Java的优点

    前几天面试被问到:“Java的优点有哪些?”,当时只回答了跨平台和解释型两点,做的并不是太好,所以今天小编就总结一下Java的几大优点,增加自己的知识储备. 1.跨平台性: Java通过自带的JVM实 ...

  6. Vue -- 基础语法和使用

    Vue 渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 一.走进Vue 1.what -- 什么是Vue ...

  7. 如何正确且高效实现OSSIM中文化的解决方案（图文详解）

    前言   对于玩OSSIM的初学者或者中级水平的从业人员来说,都有一定必要性从中文看起,当然,最终还是英文的目标迈进,只是说,为了让自己更快速上手! 虽然系统说明支持中文,实际上,只是台湾的繁体中文而 ...

  8. 对requestAnimationFrame的一点理解

    假设一个web页面为60fps(fps意为frame per second),这意为着这个页面每秒钟能重新渲染60次,60帧/1000ms换算过来约为16.6ms/帧. requestAnimatio ...

  9. linux 命令 — 文件相关

    使用文件相关命令 dd 用来生成任意大小的文件 dd if=/dev/zero of=junk.data bs=1m count=1 生成一个1m大小的文件,里面全部使用0填充 if: 指定输入文件, ...

  10. 【原创】VirtualBox 磁盘扩容教程

    问题和环境说明 环境: 主机:Ubuntu 15.10 客户机:Windows 7 x64 VirtualBox:5.0.10 虚拟机磁盘类型:VDI(VirtualBox磁盘映像) 问题: 在虚拟机 ...