DOM-実践演習 - web-0127のブログ

DOMによる書き換え

DOMツリーでは、トップレベル要素は「document」オブジェクトです
documentオブジェクトから、button（エレメントノード）をid属性を指定して参照しています

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景色を書き換える</title>
<style>
body {
  background-color: #CAE4FF;
}
button {
  cursor: pointer;
}
</style>
</head>
<body>
<p><button id="changeBg">背景色を書き換える</button></p>
<script>
window.onload = function() {
  var btn = document.getElementById( 'changeBg' );
  btn.onclick = function() {
    document.body.style.backgroundColor = '#F6CBC8';
  }
};
</script>
</body>
</html>

イベントによる画像の変更

《関数を呼び出し実行》

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像置換</title>
</head>
<body>
<img id="image" src="ph01.jpg">
<button onclick="change()">画像を変更</button>
<script>
function change(){
   var e = document.getElementById('image');
   e.setAttribute('src', 'ph02.jpg');
}
</script>
</body>
</html>

《画像を読み込み終わってから実行》

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像置換</title>
</head>
<body>
<img id="image" src="ph01.jpg">
<button id="btn">写真を変更</button>
<script>
window.onload = function() {
  var btn = document.getElementById( 'btn' );
  btn.onclick = function() {
  var e = document.getElementById( 'image' );
  e.setAttribute("src", "ph02.jpg");
  }
};
</script>
</body>
</html>

《画像の読み込みを待たずに実行》

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像置換</title>
</head>
<body>
<img id="image" src="ph01.jpg">
<button id="btn">写真を変更</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var btn = document.getElementById( 'btn' );
  btn.onclick = function() {
  var e = document.getElementById( 'image' );
  e.setAttribute("src", "ph02.jpg");
  }
}, false);
</script>
</body>
</html>

クリックイベントによる画像表示

window.onloadで読み込まれたクリックイベントが発生した時点で関数を呼び出すように書いています

<button id="btn">読込</button>
<div id="imageArea">ここに画像が読み込まれます。</div>
<script>
function showImage() {
  var htmlstr = "";
  for(var i=1; i<=3; i++) {
    htmlstr += '<img src="img/ice' + i + '.jpg" alt="アイスクリームの画像">';
  }
  document.getElementById( 'imageArea' ).innerHTML = htmlstr;
  this.disabled = true;
}
window.onload = function() {
  document.getElementById( 'btn' ).onclick = showImage;
};
</script>

初期値が空文字を代入し、何も表示しない状態にしています
イベントが実行されると、文字列が代入されて画像表示のオブジェクトが戻り値として表示されます

var htmlstr = "";

ボタンの無効化処理（１度クリック処理を行ったら、その後なにもできないようにします）
「addEventListener('DOMContentLoaded', function() { }, false);」の「false」の部分にあたります

this.disabled = true;

テキストの表示を追加する

画像へのマウスオーバー時に説明テキストノードを追加し、マウスが離れたら削除します
ノードを追加するには、createTextNode()メソッドでテキストを作成してから、appendChild()メソッドで追加します
削除するには、removeChild()メソッドを指定します
追加したノードが最後のノードなので、lastChildを指定して削除します

《関数を呼び出し実行》

<p><img id="bigimage" src="ph01.jpg" onmouseover="down()" onmouseout="up()"></p>
<p id="description"></p>
<script>
function down() {
   var e = document.getElementById( 'description' );
   var t = document.createTextNode( '写真のご説明をいたします。' );
   e.appendChild(t);
}
function up() {
   var e = document.getElementById('description');
   e.removeChild(e.lastChild);
}
</script>

画像置換演習

サムネール画像をクリックするたびに、メイン画像も変更するように記述しなさい