DOM（ドキュメント・オブジェクト・モデル）
Document Object Modelとは
HTMLの各要素に直接アクセスする仕組みです。
ブラウザがHTMLのソースを読み込むと、それを元にWebページを構成するすべてのタグをDOMオブジェクトとして再構築します。このDOMを操作することでWebページにアクセスすることができます。
DOMの操作手順
- 命令するオブジェクトを選ぶ
- メソッドをかける
- どのタイミングで命令を実行するか
命令するオブジェクトを選ぶ
DOMを使う際に覚えなければいけない事が、HTMLのツリー構造とNode(ノード)と呼ばれる単位です。
HTMLのツリー構造
HTMLを頂点とした要素の階層構造で親子関係（上下）、兄弟関係（並列）を表します。
上下の関係（親子関係）
parent⇔child
並列の関係（兄弟関係）
sibling
Node（ノード）とは
ノードは、DOMでアクセス変更できるブロック単位のことで、
3種類のノードがあります。
- エレメントノード（HTMLタグ）
- 属性ノード（srcやalt）
- テキストノード（タグで囲まれたテキスト）
ノードの指定方法
document.getElementById
document.getElementsByClassName(IE8以下は使用できない)
document.getElementsByTagName
メソッド（命令）をかける
取得した要素の内容を変更 innerHTML
取得した要素のスタイルを変更 style.backgroundColor
取得した要素の属性を変更 img.src
どのタイミングで命令を実行するか
ファイルが読み込まれたタイミング window.onload
マウスをクリックしたタイミング onclick
記述例1
<style>
#box {
width: 100px;
height: 100px;
}
</style>
<body>
<div id="box"></div>
<script>
window.onload = function(){
//id名が'box'の要素を取得する
var box = document.getElementById('box');
//取得した要素の背景色を黄緑色にする
box.style.backgroundColor = 'yellowgreen'
}
</script>
</body>
結果
記述例２
<body>
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト1</p>
<p id="two">テキスト2</p>
<script>
var h1 = document.getElementById('title');
var p1 = document.getElementById('one');
var p2 = document.getElementById('two');
console.log(h1);
console.log(p1);
console.log(p2);
</script>
</body>
結果
記述例3
<body>
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト1</p>
<p id="two">テキスト2</p>
<script>
var h1 = document.getElementById('title');
var p1 = document.getElementById('one');
var p2 = document.getElementById('two');
console.log(h1);
console.log(p1);
console.log(p2);
h1.textContent = 'id="title"のh1テキストをtextContentで変更';
p1.innerHTML = 'id="one"のpテキストをinnerHTMLで変更';
p2.innerText = 'id="two"のpテキストをinnerTextで変更';
var text1 = h1.textContent;
var text2 = p1.innerHTML;
var text3 = p2.innerText;
console.log(text1);
console.log(text2);
console.log(text3);
</script>
</body>
結果
記述例4
<body>
<h1 id="title">DOMの練習</h1>
<div id="box"><p id="one">テキスト1</p></div>
<p id="two">テキスト2</p>
<script>
var box = document.getElementById('box');
box.innerHTML = '<h2>中見出し</h2>';
</script>
</body>
結果
