JS基礎篇--HTML DOM classList 屬性

snowell 發布于2019-08-01 16:17 / 2291人閱讀

摘要：使用，程序員還可以用它來判斷某個節點是否被賦予了某個類。現在是增加現在是刪除是否存在類檢查是否含有某個類結果是或者。屬性返回類列表中類的數量。查看元素有多少個類名獲取獲取元素的所有類名返回類名在元素中的索引值。

頁面DOM里的每個節點上都有一個classList對象，程序員可以使用里面的方法新增、刪除、修改節點上的CSS類。使用classList，程序員還可以用它來判斷某個節點是否被賦予了某個CSS類。

添加類（add）

document.getElementById("myDIV").classList.add("mystyle");

為

元素添加多個類:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

移除類(remove)

使用remove方法，你可以刪除單個CSS類：

document.getElementById("myDIV").classList.remove("mystyle");

移除多個類：

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

切換類(toggle)

這個方法的作用就是，當myDiv元素上沒有這個CSS類時，它就新增這個CSS類；如果myDiv元素已經有了這個CSS類，它就是刪除它。就是反轉操作。

document.getElementById("myDIV").classList.toggle("newClassName");
    
myDiv.classList.toggle("myCssClass"); //現在是增加
myDiv.classList.toggle("myCssClass"); //現在是刪除

是否存在類（contains）

檢查是否含有某個CSS類:

var x = document.getElementById("myDIV").classList.contains("mystyle");

結果是true或者false。

length屬性

返回類列表中類的數量。
查看

元素有多少個類名:

var x = document.getElementById("myDIV").classList.length; //3

獲取獲取

元素的所有類名:

I am a DIV element
    
var x = document.getElementById("myDIV").classList;

item(index)

返回類名在元素中的索引值。索引值從 0 開始。如果索引值在區間范圍外則返回 null
獲取

元素的第一個類名（索引為0）:

var x = document.getElementById("myDIV").classList.item(0); //mystyle

瀏覽器支持

但是IE9和IE9以前的版本不支持該屬性，下面這個代碼可以彌補這個遺憾：（來自網友代碼）

if (!("classList" in document.documentElement)) {  
    Object.defineProperty(HTMLElement.prototype, "classList", {  
        get: function() {  
            var self = this;  
            function update(fn) {  
                return function(value) {  
                    var classes = self.className.split(/s+/g),  
                        index = classes.indexOf(value);  
                      
                    fn(classes, index, value);  
                    self.className = classes.join(" ");  
                }  
            }  
              
            return {                      
                add: update(function(classes, index, value) {  
                    if (!~index) classes.push(value);  
                }),  
                  
                remove: update(function(classes, index) {  
                    if (~index) classes.splice(index, 1);  
                }),  
                  
                toggle: update(function(classes, index, value) {  
                    if (~index)  
                        classes.splice(index, 1);  
                    else  
                        classes.push(value);  
                }),  
                  
                contains: function(value) {  
                    return !!~self.className.split(/s+/g).indexOf(value);  
                },  
                  
                item: function(i) {  
                    return self.className.split(/s+/g)[i] || null;  
                }  
            };  
        }  
    });  
}

這兒提示一下，其他類型值轉換成布爾值的對應關系，對應關系表如下所示：

其他類型值	轉換成的布爾值
undefined	false
null	false
布爾值	不用轉換
數字	0，NaN轉化成false，其他數字類型轉換成true
字符串	只有空字符串""轉換成false，其他都轉換成true
對象	全部轉換為true

想要了解Object.defineProperty可以參考如下兩篇文章：

《JS基礎篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用》

《JS基礎篇--JS中的可枚舉屬性與不可枚舉屬性以及擴展》

云服務器 GPU云服務器屬性篇基礎篇之基礎篇 DOM元素屬性

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50424.html

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

摘要：例如判斷節點的是否有。的實現方式源碼的實現方式源碼里面用到了，是的屬性，屬性返回以數字值返回指定節點的節點類型。如果節點是屬性節點，則屬性將返回。代碼需要了解屬性，點擊屬性文章問題地址例如：判斷html節點的class是否有no-js。 1.jquery的實現方式 $(html).hasClass(no-js); jquery源碼的實現方式： var rclass = ...

馬忠志 2019-08-20 14:17 評論0 收藏0
JSLite 的目標：縮小體積，做到 jQuery-free

摘要：轉載大牛的分析，這將是的方向。域名分析據統計，目前全世界的網站使用它。的市場份額不斷下降，以為基礎的標準語法，正得到越來越廣泛的支持。下面就探討如何用標準語法，取代的一些主要功能，做到。轉載大牛的分析，這將是JSLite的方向。前人栽樹后人乘涼，jQuery為我們制定了一套接口標準，我們繼續為此努力。域名：JSLite.io jQuery 分析據統計，目前全世界57.3%...

Scott 2019-08-22 10:55 評論0 收藏0
JavaScript DOM編程基礎（DOM屬性&事件[叮：事件代理]，Ajax，BOM，f

摘要：推薦事件事件流事件流就是事件處理執行的過程。事件注冊事件類型事件處理函數是否在捕獲階段觸發。這個就是事件對象第二行的就是事件對象。除了阻止事件傳遞到父節點，還阻止了當前節點的后續事件。缺陷流量代價，安全性問題，大小限制。文檔樹 DOM：Document Object Model 即：用對象的形式表示HTML、CSS。 DOM包含： DOM Core DOM HTML DOM Sty...

peixn 2019-08-20 16:13 評論0 收藏0
JavaScript DOM擴展——“HTML5”的注意要點

摘要：如他返回的對象是。方法，這個方法用于確定文檔是否獲得了焦點。另外，需要注意的是，該屬性插入元素并不會執行其中的腳本。在中，方法接收一個字符串，返回一個經過無害處理后的版本。屬性同樣的，在讀模式下返回調用它的元素及所有子節點的標簽。與類相關的擴充 getElementsByClassName()方法接收一個參數，即一個或多個類名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 評論0 收藏0