0Pricing
JavaScript Academy · レッスン

属性とクラスを変更する

setAttribute と classList API を使います。

「属性とクラスを変更する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

属性とクラス

要素には、hrefやdata-idなどの属性とCSSクラスが含まれています。JavaScriptには、これらを読み取ったり変更したりするための正確なAPIが用意されています。

getAttribute

getAttributeは属性の値を文字列として読み取ります。属性が存在しない場合はnullを返します。

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttributeは属性を作成または更新します。値は常に文字列です。

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttributeとhasAttribute

removeAttributeで属性を1つ削除し、hasAttributeで存在を確認します。

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

プロパティと属性の違い

多くの属性には、要素のプロパティとしても存在するものがあります（element.idやinput.valueなど）。プロパティは現在の状態を反映する一方、属性には多くの場合、初期HTMLの値が保持されます。

input.value;                 // current value
input.getAttribute("value"); // original default

data-*に対するdataset

カスタムdata-*属性は、camelCaseのキーを使用してdatasetオブジェクトから参照できます。

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

classListの概要

classListは、classNameの文字列を手動で編集せずにクラスを管理できるライブオブジェクトです。

const box = document.querySelector(".box");
console.log(box.classList);

classList.addとremove

addとremoveは1つ以上のクラス名を受け取り、重複するクラスや存在しないクラスを問題なく無視します。

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggleはクラスが存在しない場合は追加し、存在する場合は削除します。変更後の状態をbooleanで返します。2番目の引数を指定すると、オンまたはオフを強制できます。

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.containsとreplace

containsはクラスが含まれているかを確認し、replaceはその場で1つのクラスを別のクラスに置き換えます。

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

classNameよりclassListが優れている理由

classNameを文字列として編集すると、他のクラスを誤って上書きするおそれがあります。classListなら対象のクラスだけを安全に変更できます。

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

クイックチェック

toggleの動作を選んでください。

まとめ

getAttribute/setAttribute/removeAttribute/hasAttributeで属性を読み書きし、datasetでdata-*属性にアクセスします。classListのadd、remove、toggle、contains、replaceメソッドでクラスを管理します。これらはclassNameを上書きするより安全です。

よくある質問

「属性とクラスを変更する」レッスンは無料ですか？

はい。「属性とクラスを変更する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「属性とクラスを変更する」で何を学びますか？

setAttribute と classList API を使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「属性とクラスを変更する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. テキストと HTML コンテンツを変更する
  2. 要素を作成して挿入する
  3. 属性とクラスを変更する
  4. ノードを削除・置換する
← JavaScript Academyに戻る