DOMでのオブジェクトの使い方

Windowオブジェクト

Windowオブジェクトは、ブラウザーが持っている情報をそのまま持っています。ブラウザーの様々な情報を確認・取得する事が出来ます。
早速確認してみましょう。

<script>
console.log(window);
</script>

documentオブジェクト

documentオブジェクトとは、HTMLで表現されているコンテンツをすべて保持しているオブジェクトです。

DOMの操作

getElementById(id)

DOMで各要素を動かす場合、まず要素を取得しなければいけません。取得には、要素取得のメソッド「getElementById(id)」を使います。

<body>
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト１</p>
<p id="two">テキスト２</p>
<script>
var h1 = document.getElementById('title');
console.log(h1);
</script>
</body>

要素内のテキストの取得、変更

要素の中のテキストのみをコントロールしたい場合は、「textContentプロパティ」を使います。

テキストの取得

<script>
var h1 = document.getElementById('title');
console.log(h1);

var title = h1.textContent;
console.log(title);
</script>

テキストの変更

<script>
var h1 = document.getElementById('title');
h1.textContent = "タイトルを変更";
</script>

要素を書き換える

innerHTMLというプロパティを使うと指定した要素ごと書き換わります。

<script>
var p1 = document.getElementById('one');
  p1.innerHTML = '<h2>中見出し</h2>';
</script>

要素やテキストを作成する

新しく要素を生成する場合は、「createElement(tag_type);」や「createTextNode(text);」を使います。

createElement(tag_type)
新しく要素（タグ）を生成する

createTextNode(text)
新しくテキストを生成する

しかし、これだけでは要素が生成されません。新しい要素を正しい文章構造を持ってブラウザで表示させるためには、既存の要素のどれかを親要素に指定し、子要素として追加する必要があります。新しい要素の場所を明確にして、DOMのツリー構造に正しく組みこまなければいけないわけです。
このツリー構造というのはjQueryにも共通する必要に大切な考え方なので、しっかりと理解しましょう。

特定の親要素の下に子要素を追加するためのメソッドがappendChild(element); です。
append（追加する）

今回はbodyタグの中に直接新しいpタグを生成したいので、pタグにとって親要素はbodyです。なのでbodyに対して「appendChild」を指定します。

<script>
var p = document.createElement('p');
var text = document.createTextNode('テキスト３');
document.body.appendChild(p).appendChild(text);
</script>

画像の差し替え

<body>
<p><img id="image" src="img/01.png" alt="昼間の画像"></p>
<script>
  var image = document.getElementById('image');
  image.src = 'img/02.png';
  image.alt = '夕方の画像';
</script>
</body>

関数との組み合わせ

先日使ったfunction関数と組み合わせて、ボタンをクリックしたら、テキストや画像が変わるようにしてみましょう。