【JavaScript】DOMTokenListについて初心者メモ
DOMTokenListとは
DOMTokenList は、class 属性の値をあたかも配列であるかのように管理するための専用オブジェクトです。配列ではありません。
classList プロパティを使ってこのオブジェクトにアクセスすると、文字列の連結や置換といった煩雑な操作をせずに、add()、remove()、toggle() といったメソッドでクラスを直感的に操作できます。
特徴
<element class = "class1 class2 class3"></element>
※ tutorialspoint.com/javascript/javascript_dom_domtokenlist.htm よりコード引用
1. インデックスアクセスは可能だが、配列ではない
DOMTokenListは、element.classList[0]のようにインデックスを使って個々のクラス名にアクセスできます。
しかし、push()やpop()、splice()といった配列特有のメソッドは使えません。
これはDOMTokenListが、配列に似たプロパティ（lengthプロパティなど）やインデックスによるアクセスをサポートするものの、厳密な意味での配列ではないためのようです。
DOMTokenListは、あくまでクラスのリストを管理するための専用オブジェクトです。
クラスの追加・削除には、add()やremove()といった専用のメソッドを使います。
2. DOMTokenListとして管理されているのは、class属性の値
DOMTokenListとして管理されているのは、class属性の値 "class1 class2 class3" です。
ブラウザは、HTML要素のclass属性の値（文字列）を、スペースで区切られた複数のトークン（単語）のリストとして解釈します。このリストを操作するために、DOMTokenList という特殊なオブジェクトが用意され、element.classList というプロパティを通してアクセスできるようになっているのです。
element.classListが返す値が DOMTokenList オブジェクトであり、その DOMTokenList オブジェクトが "class1", "class2", "class3"というトークンをリストとして保持している、ということです。
※<element class = "class1 class2 class3"></element>というHTMLがあった場合、<element>タグ内全体をDOMTokenListとして管理されているわけではありません。
※element.classNameという生の文字列を開発者に直接操作させるのではなく、classListという特別なプロパティを通じてDOMTokenListオブジェクトを提供することで、クラスの追加や削除といった操作を、add()やremove()のような安全で便利なメソッドに限定している。
→ DOMTokenListにelement.classListというプロパティを介してアクセスするのは、カプセル化の考え方に基づいています。これは、オブジェクトの内部のデータを直接操作させず、特定のプロパティやメソッドを通じて間接的に操作させることで、データの整合性を保ち、誤った使い方を防ぐためのソフトウェア設計の原則です。
※DOMTokenListが値をリストとして保持している状態は、JSON形式が配列を保持している状態と似ています。
参考URL
Discussion