JS基础篇--如何用JavaScript判断dom是否有存在某class的值？

马忠志发布于2019-08-20 14:17 / 2717人阅读

摘要：例如判断节点的是否有。的实现方式源码的实现方式源码里面用到了，是的属性，属性返回以数字值返回指定节点的节点类型。如果节点是属性节点，则属性将返回。代码需要了解属性，点击属性文章问题地址

例如：

判断html节点的class是否有no-js。

1.jquery的实现方式

$("html").hasClass("no-js");

jquery源码的实现方式：

var rclass = /[	
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;//1

如果想了解更多的节点类型，可查看：HTML DOM nodeType 属性

2.js的实现方式

function hasClass(element, cls) {
    return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
}

hasClass(document.querySelector("html"), "no-js");

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") ) ;

需要了解HTML DOM classList属性，点击HTML DOM classList 属性文章
问题地址：https://segmentfault.com/q/10...

GPU云服务器云服务器如何用js判断密码 js判断数组中是否包含某一项 js 判断是否有字段判断session是否存在

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81515.html

前端基础入门

摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...

shinezejian 2019-08-22 13:51 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

_Dreams 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

luck 2019-08-19 18:24 评论0 收藏0
jQuery基础(一) ：样式篇

摘要：如下就是对象或是如下以下两者的修改都是等价的但是使用不能很好的操作，所以可以将其转换成对象把元素转化成的对象总体，表示当前的上下文对象是一个对象，可以调用对象所拥有的属性和方法。代表的上下文对象是一个的上下文对象，可以调用的方法和属性值。一：初识 jquery： 1、 jQuery 只是一个库，不需要特别的安装，只需要我们在页面标签内中通过 script 标签脚本引入 jQuer...

SegmentFault 2019-08-20 10:35 评论0 收藏0