HTML DOMTokenList リファレンスマニュアル

DOMTokenList

DOMTokenList スペースで区切られたトークンの集合です。

DOMTokenList（0から始まる）にインデックスでアクセスできます。

length 属性DOMTokenList 内のトークンの数を返します。

注記：HTML 要素の classList 属性DOMTokenList を表します。

DOMTokenList 属性とメソッド

名前 説明
add() 1つまたは複数のトークンをリストに追加します。
contains() リストにクラスが含まれている場合、true を返します。
entries() リストからキー/値のペアを持つイテレータを返します。
forEach() リストの各トークンに対してコールバック関数を実行します。
item() 指定されたインデックスのトークンを返します。
keys() リストのキーを持つイテレータを返します。
length リストのトークン数を返します。
remove() リストから1つまたは複数のトークンを削除します。
replace() リストのトークンを置き換えます。
supports() トークンが属性でサポートされている場合、trueを返します。
toggle() リストのトークン間で切り替えます。
value トークンリストを文字列形式で返します。
values() リストの値を持つイテレータを返します。

インスタンス

例1

要素に「myStyle」クラスを追加：

element.classList.add("myStyle");

自分で試してみる

例2

要素から「myStyle」クラスを削除：

element.classList.remove("myStyle");

自分で試してみる

例3

"myStyle"をオンオフ：

element.classList.toggle("myStyle");

自分で試してみる

ページの下部にさらに例があります。

配列ではありません

DOMTokenListは配列ではありません！

DOMTokenListは実際には配列ではありません。

DOMTokenListはインデックスを参照してトークンを巡回できます。

ただし、DOMTokenList上ではArrayメソッド（push()、pop()、join()など）を使用することはできません。

インスタンス

例1

要素に複数のクラスを追加：

element.classList.add("myStyle", "anotherClass", "thirdClass");

自分で試してみる

例2

要素から複数のクラスを削除：

element.classList.remove("myStyle", "anotherClass", "thirdClass");

自分で試してみる

例3

要素のクラス名の数を取得：

let numb = element.classList.length;

自分で試してみる

例4

「myDIV」要素のクラス名を取得：

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

自分で試してみる

例5

要素の最初のクラスを取得します：

let className = element.classList.item(0);

自分で試してみる

例 6

要素に "myStyle" クラスがありますか？

let x = element.classList.contains("myStyle");

自分で試してみる

例 7

要素に "myStyle" クラスがある場合、"anotherClass" を削除します：

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

自分で試してみる

例 8

クラス間で切り替え、ドロップダウンボタンを作成します：

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

自分で試してみる

例 9

粘性ナビゲーションバーの作成：

// ナビゲーションバーを取得します
const navbar = document.getElementById("navbar");
// ナビゲーションバーのオフセット位置を取得します
const sticky = navbar.offsetTop;
// スクロール位置に到達したときに sticky クラスをナビゲーションバーに追加します
// スクロール位置から離れたときに削除します
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

自分で試してみる