【授業メモ】JavaScript DOMの使い方
DOMでのオブジェクトの使い方
★DOMとは HTMLやCSSに変更を加えずに、要素に命令をすることができる仕組み
- ドキュメント HTMLのこと
- オブジェクト HTMLの中の要素(p,h1..)及び要素の中(alt,テキスト)
- モデル
DOMを通して、「オブジェクト指向」という、対象をオブジェクト（要素ノード）、
つまり「もの」のように捉えてプログラミングを行う手法を覚える。
1、命令するオブジェクトを選ぶ
2、メソッド（命令）をかける
3、どのタイミングで命令を実行するか
★Node(ノード)とは？
ノードとは、DOMでアクセス・変更できるブロック単位。
HTMLタグ全てがノードで作られていまいる。
DOMで扱うノードの種類
- エレメントノード（HTMLタグ）
- 属性ノード（src や alt）
- テキストノード（タグで囲まれたテキスト）
★命令の仕方
1、命令するオブジェクトを選ぶ
ノードの指定方法
要素のId名で指定する 「document.getElementById」
要素のclass名で指定する 「document.getElementsByClassName」（※IE8以下では利用できません）
指定した要素全てに命令する「document.getElementsByTagName」
2、メソッド（命令）をかける
メソッドはドットシンタックス（ドットでつなぐ文法）で記述
innerHTM(取得した要素の内容を変更)
style.backgroundColor(取得した要素のスタイルを変更)
image.src （取得した要素の属性を変更）
3、どのタイミングで命令を実行するか
window.onload（ファイルが読み込まれたタイミング）
onclick（ボタンを押したら）
★オブジェクト
windowオブジェクト
ブラウザの情報をそのまま取得できる。
<script>
console.log(window);
</script>
documentオブジェクト
HTMLで表現されているコンテンツをすべて保持しているオブジェクト
DOMの操作
★getElementById(id)
<h1 id="title">DOMの練習</h1>を変数h1に代入したい
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト１</p>
<p id="two">テキスト２</p>
<script>
var h1 = document.getElementById('title');
console.log(h1);
</script>
★テキストの取得
変数h1＝<h1 id="title">DOMの練習</h1> の中のテキスト部分だけ取得したい
<script>
var h1 = document.getElementById('title');
console.log(h1);
var title = h1.textContent;
console.log(title);
</script>
★テキストの変更
変数h1＝<h1 id="title">DOMの練習</h1> の中のテキスト部分のテキストを変更したい
<script>
var h1 = document.getElementById('title');
console.log(h1);
var title = h1.textContent = 'こんにちは';
console.log(title);
</script>
★要素の書き換え
変数p1に <p id="one">テキスト１</p> を代入し、中身全てを差し替えたい
HTMLをいじらずに、HTMLに変更を加える
<script>
var p1 = document.getElementById('one');
p1.innerHTML = '<h2>中見出し</h2>';
</script>
★要素や要素の中身を生成
→jQueryでやるのでまた今度
★画像の差し替え
ファイルが読み込まれたときに画像を差し替える
- どのタイミングで画像を変えるか決めて、作業をfunctionに入れる
- 変数imgにidで<img id="img" src="img/asa.png" alt="朝の画像">を丸っと入れる
- 何を変えるか指示する
<img id="img" src="img/asa.png" alt="朝の画像">
//ファイルが読み込まれたタイミングで画像の差し替え
window.onload = function() {
var img = document.getElementById('img');
var img.src = 'img/yuugata.png';
var img.alt = '夕方の画像';
}
ボタンを押した時に画像を差し替える
//ボタンを押したタイミングで画像の差し替え
function gazou() {
var img = document.getElementById('img');
img.src = 'img/yuugata.png';
img.alt = '夕方の画像';
console.log(img);
};
</script>
<button onClick="gazou();">画像を変更する</button>
CSSに変更を加える
<style>
#box {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div id="box"></div>
<button onClick="colorchange();">色を変える</button>
<script>
function colorchange() {
var box = document.getElementById('box');
box.style.backgroundColor= 'pink';
}
</script>
</body>
ボタンを押しておみくじを表示させる
<body>
<p><img id="one" src="img/0.png" alt=""></p>
<button onClick="kuji();">ボタン</button>
<script>
function kuji() {
var a = Math.floor( Math.random() * 4 ) +1;
var omikuji = document.getElementById('one');
omikuji.src = 'img/' + a + '.png';
}
</script>
</body>
