JS基礎編--HTML DOM classList属性

ページ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

ブラウザのサポート

しかし、IE 9とIE 9の以前のバージョンではこの属性はサポートされていません.次のコードはこの残念さを補うことができます.(ネットユーザーコードから)

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では、次の2つの記事を参照できます.
『JS基礎編--JS applyの巧みな使い方とObject.definePropertyへの拡張の使用』
『JS基礎編--JSにおける列挙可能属性と列挙不可属性及び拡張』