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

馬忠志發布于2019-08-20 14:17 / 2745人閱讀

摘要：例如判斷節點的是否有。的實現方式源碼的實現方式源碼里面用到了，是的屬性，屬性返回以數字值返回指定節點的節點類型。如果節點是屬性節點，則屬性將返回。代碼需要了解屬性，點擊屬性文章問題地址

例如：

判斷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是否存在

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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