読者です 読者をやめる 読者になる 読者になる

DOM(ドキュメント・オブジェクト・モデル)

Document Object Modelとは

HTMLの各要素に直接アクセスする仕組みです。

 

ブラウザがHTMLのソースを読み込むと、それを元にWebページを構成するすべてのタグをDOMオブジェクトとして再構築します。このDOMを操作することでWebページにアクセスすることができます。

DOMの操作手順

  1. 命令するオブジェクトを選ぶ
  2. メソッドをかける
  3. どのタイミングで命令を実行するか

命令するオブジェクトを選ぶ

DOMを使う際に覚えなければいけない事が、HTMLのツリー構造とNode(ノード)と呼ばれる単位です。

HTMLのツリー構造

HTMLを頂点とした要素の階層構造で親子関係(上下)、兄弟関係(並列)を表します。

f:id:develog:20160906103628g:plain

上下の関係(親子関係)

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>

 結果

f:id:develog:20160906101914g:plain

記述例2

<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>

結果

f:id:develog:20160906111053g:plain

記述例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>

結果

f:id:develog:20160906111453g:plain

記述例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>

結果

f:id:develog:20160909095905g:plain