完成イメージ
画像を切り替えるボタンをクリックして、画像を変更してみよう！
今回のテーマ
ボタンをクリックしたら、画像の src（表示する画像ファイル）や、リンクの href（リンク先URL）など、HTMLタグの属性をJavaScriptで書き換える方法を学びます。
目的
.setAttribute()で画像やリンクの属性を変更する.getAttribute()で現在の属性値を取得する- JavaScriptから HTML タグの見た目や動作を変える仕組みを体験する
作成ファイル・保存場所
js-domフォルダに以下のファイルを作成してください。
| ファイル名 | 内容 |
|---|---|
| js-dom06.html | ボタンクリックの動作練習用HTML/js |
| js-dom__06.html | ステップアップ練習用HTML/js |
| images/01.jpgと02.jpg | ダウンロードjs-domフォルダに配置 |
練習するHTMLは下記からコピーしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性を変更してみよう</title>
<style>
#main-img {
width: 400px;
}
</style>
</head>
<body>
<h1>属性を変更してみよう！</h1>
<p>
<img id="main-img" src="images/01.jpg" alt="ネコの画像">
</p>
<p>
<button id="change-img-btn">画像を切り替える</button>
</p>
<script>
</script>
</body>
</html>
JavaScriptは <script> タグ内に直接記述してください（内部JS）
チェックポイント
getAttribute()でsrcやhrefを取得できているか？setAttribute()で画像やリンクが正しく変わったか？- ボタンを押すと、見た目の変化があるか？
JavaScript基礎トレーニング
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性を変更してみよう</title>
<style>
#main-img {
width: 400px;
}
</style>
</head>
<body>
<h1>属性を変更してみよう！</h1>
<p>
<img id="main-img" src="images/01.jpg" alt="ネコの画像">
</p>
<p>
<button id="change-img-btn">画像を切り替える</button>
</p>
<script>
const img = document.getElementById('main-img');
const changeImgBtn = document.getElementById('change-img-btn');
// 手動切り替え
changeImgBtn.addEventListener('click', () => {
const currentSrc = img.getAttribute('src');
if (currentSrc.includes('01.jpg')) {
img.setAttribute('src', 'images/02.jpg');
img.setAttribute('alt', '猫イラスト画像');
} else {
img.setAttribute('src', 'images/01.jpg');
img.setAttribute('alt', '猫写真画像');
}
});
</script>
</body>
</html>
.setAttribute() / .getAttribute() とは？
HTMLのタグには「属性（attribute）」と呼ばれる情報があります。
<img src="photo1.jpg" alt="写真">
この src や alt を JavaScriptから変更するには .setAttribute() を使います。
img.setAttribute('src', 'photo2.jpg'); // 表示画像を変更
今の値を確認したいときは .getAttribute() を使います
const currentSrc = img.getAttribute('src');
console.log(currentSrc); // photo1.jpg
たとえば以下のような場面で使わか」を true / false で返してくれます。
知得！HTMLの「属性」は、JavaScriptからも操作できる！
HTMLタグには 属性（attribute） という追加情報があります。たとえば、以下のように画像のURLや代替テキスト（alt）などが「属性」として書かれています。
<img src="images/01.jpg" alt="ネコの画像">
属性は、タグの動作や見た目を決める大事なパーツです。
そして JavaScript からはこの 属性を自由に読み書きすることができます！
HTML属性とJavaScriptの対応一覧
| HTMLでの書き方 | JavaScriptで取得・変更する方法 | 補足 |
|---|---|---|
<img src="xxx.jpg"> | img.getAttribute('src') / img.setAttribute('src', '...') | 表示する画像のファイルパス |
<a href="https://..."> | link.getAttribute('href') / setAttribute | リンク先URL |
<input value="初期値"> | input.value / input.setAttribute('value', '...') | ユーザーが入力した値は .value で取得 |
<div class="box"> | div.className / div.setAttribute('class', '...') | .class ではなく .className を使う |
<img alt="説明文"> | img.getAttribute('alt') / setAttribute | 代替テキスト（画像が表示できないとき） |
<input type="text"> | input.getAttribute('type') | inputの種類（text, number など） |
すべての属性が .setAttribute() で扱えるとは限らない！
HTMLの属性の多くは .getAttribute() や .setAttribute() で操作できますが、
一部の属性は、専用のプロパティを使う方が安全・確実です。
| 属性 | よく使う方法 | なぜ？ |
|---|---|---|
value | input.value | .setAttribute('value', ...) は初期値のみ変更され、動的な変更に反映されない場合がある |
checked | input.checked | .setAttribute('checked', ...) は制御が難しい（ラジオやチェックボックス） |
class | element.className または .classList.add() | 文字列操作より .classList が便利 |
style | element.style.color = 'red' | CSS操作には .style がわかりやすい |
属性の操作には「専用プロパティ」がある場合も！
JavaScriptでは、属性に対応した「専用のプロパティ」が用意されていることがあります。
.value,.checked,.selected,.disabled,.classList,.styleなど- このようなプロパティを使うと、見た目の変化がすぐに反映されるため、より確実です
属性を操作するときの考え方
| 操作内容 | 推奨される方法 |
|---|---|
| HTML上の情報を取得したい | getAttribute() |
| HTMLの構造として属性を書き換えたい | setAttribute() |
| ユーザーの操作に応じて変化させたい | .value, .checked, .classList, .style などの専用プロパティ |
includes()とは？
if (currentSrc.includes('01.jpg')) {
// 現在の画像が「01.jpg」なら実行される
}
このように書くことで、文字列の中に特定の文字が「含まれているかどうか」を調べることができます
書き方のポイント
文字列.includes('調べたい文字')
- 戻り値は
trueまたはfalse - 大文字・小文字を区別する（完全一致が必要）
const url = 'images/01.jpg';
url.includes('01.jpg'); // → true
url.includes('02.jpg'); // → false
url.includes('images'); // → true
url.includes('.png'); // → false
画像の切り替えでは、現在の画像が 01.jpg なのか 02.jpg なのかを判定する必要があります。そのため、src 属性の中に "01.jpg" が含まれているか？を調べるのに includes() が使われています。
JavaScriptステップアップトレーニング
2秒たったら自動的に画像が切り替わります。止めるボタンで止まります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性を変更してみよう</title>
<style>
#main-img {
width: 400px;
}
</style>
</head>
<body>
<h1>属性を変更してみよう！</h1>
<p>
<img id="main-img" src="images/01.jpg" alt="ネコの画像">
</p>
<p>
<button id="auto-btn">自動で切り替える</button>
<button id="stop-btn">止める</button>
</p>
<script>
const img = document.getElementById('main-img');
const autoBtn = document.getElementById('auto-btn');
const stopBtn = document.getElementById('stop-btn');
// 自動切り替え
let timer = null;
autoBtn.addEventListener('click', () => {
if (timer !== null) return; // 二重実行防止
timer = setInterval(() => {
const currentSrc = img.getAttribute('src');
if (currentSrc.includes('01.jpg')) {
img.setAttribute('src', 'images/02.jpg');
img.setAttribute('alt', '風景の画像');
} else {
img.setAttribute('src', 'images/01.jpg');
img.setAttribute('alt', 'ネコの画像');
}
}, 2000);
});
// 停止
stopBtn.addEventListener('click', () => {
clearInterval(timer);
timer = null;
});
</script>
</body>
</html>
timer = null の役割は？
「タイマーが止まった状態だよ」ということを明示するためのフラグです。
これによって「次にまたスタートボタンが押されたときに、再スタートできる」ようになります。
timer = null; // タイマーをリセットして再実行可能にする
setInterval() の仕組み
timer = setInterval(() => {
// 処理
}, 2000);
このとき setInterval() は、繰り返し処理を管理する番号（ID）を返します。
そのIDを変数 timer に入れておくことで、あとで clearInterval(timer) を使って止めることができます。
なぜ null にするの？
clearInterval(timer); でタイマーを止めた後も、変数 timer の中には「直前のID（数値）」が残っています。
console.log(timer); // 102（例）
この状態で再び「自動で切り替える」ボタンを押すと、timer !== null の条件に引っかかって、新しいタイマーが動きません。
そこで null を使う！
clearInterval(timer); // タイマーを止める timer = null; // フラグをリセット（=停止状態に戻す）
これによって、次に「スタートボタン」が押されたときに
if (timer !== null) return; // 実行中なら何もしない
timer === null だから、タイマーが再スタートできる、という仕組みになります。