PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【JavaScript】DOM

DOMはHTML文章をオブジェクトとして情報の取得する仕組みです。
DOMの操作を行うことで、HTMLの中身を変更することもできます。

前提として、以下のHTMLを使います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>
<script></script>
</body>
</html>


要素の内容を操作する。

要素の内容を操作するには、「getElementsByTagName」を使います。

書き方

document.getElementsByTagName('取得したい要素名')

実行例(ソース)

var ps = document.getElementsByTagName('p');
alert(ps[0]);


結果

f:id:game-web-design:20140930100535p:plain
上記のソースでは、変数psにP要素の0番目を取得します。
しかし、上記の書き方では「object HTMLParagraphElement」と出てきて、データを取得ができていません。

要素の内容を取得する

要素の中に入っている内容を取得するには、「innerHTML」を使います。

書き方

オブジェクト名 . innerHTML

実行例(ソース)

var ps = document.getElementsByTagName('p');
alert(ps[0].innerHTML);

結果

f:id:game-web-design:20140930100553p:plain
上記のソースでは、変数psのP要素の0番目にあるタグの内容を取得しています。
なので、結果は「第一段落」になります。

要素の内容を変える

要素の内容を書き換えることができます。これも「innerHTML」を使うことで可能です。

書き方

オブジェクト名 . innerHTML = '文字列';

実行例(ソース)

var ps = document.getElementsByTagName('p');
//p要素の内容を書き換えます
ps[0].innerHTML = 'P要素の0番目です';

結果

f:id:game-web-design:20140930112730p:plain
P要素の0番目が「第1段落」から「P要素の0番目です」に書き換えられています。

要素に内容を書き加える

要素の内容を書き加えることも可能です。

書き方

オブジェクト名 . innerHTML = '文字列';

実行例(ソース)

var ps = document.getElementsByTagName('p');
//p要素の内容に文字列を書き加えます
ps[0].innerHTML = ps[0].innerHTML + '<b>(New!)</b>';

結果

f:id:game-web-design:20140930113304p:plain
P要素の0番目に「New!」が書き加えられています。