DOM = Document Object Model
プロパティへのアクセス
|
1 2 3 4 |
console.dir(window); //オブジェクトのプロパティを羅列 console.log(window.location.href); console.log(window.outerWidth); console.log(window.outerHeight); |
サンプル: 3秒後にGoogleへジャンプする
|
1 2 3 4 |
function jumpToGoogle() { window.location.href = "http://google.com/"; } setTimeout(function(){jumpToGoogle();}, 3000); |
ドキュメントの操作
window.document = 現在開いているドキュメント (先頭のwindowは省略可)
属性の変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .defaultStyle { font-size: 30px; font-weight: bold; } </style> <p id="msg">Hello</p> <script> var m = document.getElementById('msg'); m.textContent = 'Good morning'; m.style.color = 'red'; m.className = 'defaultStyle'; </script> |
要素の追加
body要素の末尾にparagを追加し、paragの末尾にtextを追加。
|
1 2 3 4 5 |
<script> var parag = document.createElement('p'); var text = document.createTextNode('Hello World'); document.body.appendChild(parag).appendChild(text); </script> |
イベントの追加
ボタンをクリックするたびにページ末尾にHello Worldが追加される。
|
1 2 3 4 5 6 7 8 |
<button id="add">Click Me</button> <script> document.getElementById('add').addEventListener('click', function() { var parag = document.createElement('p'); var text = document.createTextNode('Hello World'); document.body.appendChild(parag).appendChild(text); }); </script> |