DOMについて
- Document Object Model
- HTML や XML 文書を操作するための、たくさんの機能や規則のこと
- DOMは階層構造をとる
- 各要素はノードという単語を用いて表現される
ノードについて
- ノード
- 子ノード(children)
- 親ノード(parent)
- 兄弟姉妹ノード
- ノードは、webページとプログラミング言語をつなぐ役割を持つ
- ID名からノードを取得、操作する
DOMとは何か？【JavaScript初心者向けにわかりやすく説明します！】
DOMの話に戻ります
HTML要素の取得：getElementById()
- Documentオブジェクトのメソッドである「getElementById()」が一般的らしい
- 文字列のHTMLタグを認識できる
使用例
<body>
<p id="text">これはサンプルテキストです</p>
<script>
var p = document.getElementById('text');
console.log( p );
</script>
</body>
実行結果
<p id="text">これはサンプルテキストです</p>
HTML要素をJavaScriptから書き換える：innerHTMLプロパティ
- 「innerHTML」プロパティを代入するだけ！
使用例
<div id="wrap">
<p>これはサンプルテキストです</p>
</div>
これをinnerHTMLプロパティでp要素をh1要素に書き換える
var div = document.getElementById('wrap');
div.innerHTML = "<h1>サンプルタイトル</h1>";
console.log( div );
実行結果
<div id="wrap">
<h1>サンプルタイトル</h1>
</div>
JavaScriptからHTML要素を作成する：createElement( )
- もっとも簡単な方法はcreateElement()
- 例えば「createElement('p')」と記述することで「p要素」を新規に生成
var pElement = document.createElement('p');
- この方法で作成しても、画面に表示されないので、HTML要素をDOMに追加しなくてはならない
HTML要素を追加：appnedChild()
- JavaScript側で生成したHTML要素をDOMに追加
var p = document.createElement('p');
//テキストを追加する
p.textContent = 'これはサンプルです';
//body要素内にp要素を配置する
document.body.appendChild( p );
実行結果
<p>これはサンプルです</p>
※ textContent()メソッドでテキストを追加
DOMが読み込まれるタイミング：onloadイベント
- DOMによるオブジェクト化がされていないと、JavaScript側からHTMLを操作できない
- DOMが読み込まれた後にJavaScriptが実行できるようにしなければならない
- その中で、もっとも簡単なのがonloadイベント
dow.onload = function() {
//ここに処理を書く
}
- しかし複数記述すると、その都度上書きされてしまうので、上に書いたものは実行されない・・・
window.onload = function() {
//処理１
}
window.onload = function() {
//処理２
}
window.onload = function() {
//処理３
}
- こちらの処理は一番下しか実行されない
onloadでなくaddEventListenerを使ってみる
使用例
window.addEventListener('load', function() {
//処理１
})
window.addEventListener('load', function() {
//処理２
})
window.addEventListener('load', function() {
//処理３
})
- 第一引数にloanを書き、第二引数に実行する関数処理をかく
- addEventListenerを使用することで、３回記述したとしても全て実行することができる