[JavaScript] 基本メモ: DOM操作

DOM = Document Object Model

プロパティへのアクセス

console.dir(window); //オブジェクトのプロパティを羅列
console.log(window.location.href);
console.log(window.outerWidth);
console.log(window.outerHeight);

サンプル: 3秒後にGoogleへジャンプする

function jumpToGoogle() {
    window.location.href = "http://google.com/";
}
setTimeout(function(){jumpToGoogle();}, 3000);

ドキュメントの操作

window.document = 現在開いているドキュメント (先頭のwindowは省略可)

属性の変更

<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を追加。

<script>
var parag = document.createElement('p');
var text = document.createTextNode('Hello World');
document.body.appendChild(parag).appendChild(text);
</script>

イベントの追加

ボタンをクリックするたびにページ末尾にHello Worldが追加される。

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