【JavaScript】forEachで配列の繰り返しをしよう
takahide
初心者がITを楽しむブログ
【JavaScript】属性値の取得/追加/変更/削除がしたい（getAttribute/setAttribute/removeAttribute）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『属性値の取得/追加/変更/削除』について、『getAttribute』『setAttribute』『removeAttribute』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『属性値の取得/追加/変更/削除』が理解できない
- 『getAttribute』『setAttribute』『removeAttribute』の記載方法を知りたい
ぜひ本記事を参考にしてください。
属性値の取得（getAttribute）
まずは属性値の取得を見ていきましょう。
属性値の取得とは、指定された属性値を取得する処理を指します。
処理を実行するには、『getAttributeメソッド』を使用します。
//記載方法
要素.getAttribute(取得する属性名)以下が記載例です。
ここでは、『img要素』の『alt属性』の値を取得しています。
<img class="test-img" src="https://it-newcomer.com/wp-content/uploads/2026/01/test.jpg" title="test" alt="テスト画像">
let testImage = document.querySelector(".test-img");
console.log(testImage.getAttribute("alt"));
//実行結果：テスト画像実行するとalt属性の「テスト画像」が出力されていることがわかりますね。
ちなみに流れはこんな感じ。
『変数testImage』を宣言し、『querySelectorメソッド』によって取得した、『test-imgクラス』を格納しています。
その後、『変数testImage』に対し『getAttributeメソッド』を宣言し、『alt属性』の値『テスト画像』を取得しています。
今回は1つの属性値を取得していますが、すべての属性値を取得する場合は『attributes』プロパティを使用すると良いみたいです。
属性値の追加/変更（setAttribute）
続けて、属性値の追加/変更です。
その名の通り、指定された属性値を追加/変更する処理を指します。
処理を実行するには、『setAttributeメソッド』を使用します。
//記載方法
要素.setAttribute(属性名,新たな属性値)追加でも変更でも利用するのは『setAttribute』です。
それぞれの記載例を見てみましょう。
属性値の追加
前項の『img要素』に対し、新たに『height属性』取得します。
つまりやりたいことは、画像の高さを変更するということです。
let testImage2 = document.querySelector(".test-img");
testImage2.setAttribute("height", "200px");実行してみましょう。
『img要素』に『height属性：200px』が追加され、高さが変化したことが分かりますね。
属性値の変更
前項の『img要素』の『alt属性』の値を変更します。
やりたいことは、『alt属性』の値を「テスト画像」→「てすとがぞう」に変化させることです。
let testImage3 = document.querySelector(".test-img");
testImage3.setAttribute("alt", "てすとがぞう");
console.log(testImage3.getAttribute("alt"));
//実行結果：てすとがぞう実行してみると、『img要素』の『alt属性』が「テスト画像」から「てすとがぞう」に変更できていることが分かりますね。
以上が属性値の追加と変更でした。
属性値の削除（removeAttribute）
最期は属性値の削除です。
属性値の削除とは、指定された属性値を削除する処理を指します。
処理を実行するには、『removeAttributeメソッド』を使用します。
//記載方法
要素.removeAttribute(削除する属性名)以下が記載例です。
ここでは、『img要素』の『alt属性』の値、『テスト画像』を削除します。
let testImage4 = document.querySelector(".test-img");
testImage4.removeAttribute("alt");
console.log(testImage4.getAttribute("alt"));
//実行結果：null実行してみると、『img要素』の『alt属性：テスト画像』が削除され、『null』になっています。
簡単ですね。
まとめ
以上が「JavaScriptにおける『属性値の取得/追加/変更/削除』及び、『getAttribute』『setAttribute』『removeAttribute』の紹介」でした。
まとめ
- 属性値の取得：要素.getAttribute(取得する属性名)
- 属性値の追加/変更：要素.setAttribute(属性名,新たな属性値)
- 属性値の削除：要素.removeAttribute(削除する属性名)
「Attribute」が「属性」という意味なので、「get」「set」「remove」という言葉のイメージをつかめれば分かりやすいですね。
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
