Table of Contents
Webページにおける javascript の役割は、主にページ内の要素（タグ）の追加や編集、削除やそのスタイル（CSSによる装飾）の変更などを動的に行うことです。
「動的に」というのは、ページが表示された後でもリアルタイムにということです。
例えば、ボタンを押した時に今まで表示されていなかった要素を追加したり、ページ内の文章を変えたり、HTML単独ではできない処理も javascript を使うことで実現できます。
javascript でページ内のHTML構造を変化させるためには、そのために用意されたDOM（Document Object Model）というAPI（仕組み）を利用します。
DOMとは
MDN（Mozilla Developer Network）の説明によれば、DOMとは以下のような仕組みです。
Document Object Model は HTML と XML ドキュメントへの API です。これは、ドキュメントの構造的な表現、その内容を変更可能にすること、そして視覚的なプレゼンテーションを提供します。本質的には、ウェブページをスクリプト又はプログラミング言語と結合します。
DOM (Document Object Model) について – DOM | MDN
Document Object Model (DOM) は HTML、XHTML、XML ドキュメントのオブジェクトを表現しその情報をやりとりするための、そしてクラスプラットフォームな、言語に依存しない規則のことです。DOM ツリー内のオブジェクトは付属のメソッドを使って指定、操作できます。
JavaScript 技術概説 – JavaScript | MDN
MDNの説明によれば、DOMは javascript 以外の言語からでも利用することができます。
しかし、最も簡単にDOMを利用できるスクリプト言語といえば javascript と考えられています。
最も簡単なDOMによるページ操作
早速DOMによるHTML構造の操作を行ってみましょう。
以下のようなHTMLのページがあるとします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javascriptによるDOMのテストページ</title> </head> <body> <h1>タイトルです</h1> <p>テスト文章です。</p> </body> </html>
見出しと短い段落があるだけの簡単なページです。
ブラウザで表示すると以下のようになります。
それでは javascript からDOMを使って、段落（pタグ）の文章を書き換えてみます。
HTMLソース内にタグ script を追加して、そこに以下のようなスクリプトを書き込んでみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>javascriptによるDOMのテストページ</title>
</head>
<body>
<h1>タイトルです</h1>
<p>テスト文章です。</p>
</body>
<script>
// ページ内にある pタグ を全て取得
var pTag = document.getElementsByTagName("p");
// 1番最初に登場する pタグ の中身を書き換える
pTag[0].innerHTML = "書き換えたよ！";
</script>
</html>
このHTMLソースをブラウザで表示してみると、段落（pタグ）の中の文章が書き換わっていることがわかります。
DOMを操作するjavascriptの解説
scriptタグの中に書いた javascript が何をしているかを解説します。
まず、DOMによる操作を行うためには、その対象となる要素（タグ）を指定する必要があります。
その要素を指定する方法は様々ありますが、今回はタグの名前を使ってその要素を指定しています。
document.getElementsByTagName(タグ名)
タグ名を指定してページ内の要素を指定する場合はメソッド getElementsByTagName を使います。
このように書くと、ページ内に存在している指定したタグを全て取得できます。
取得した要素は javascript の配列として返されるので、これを変数 pTag に代入します。
たとえページ内に指定した名前のタグが一つしかなくても、配列として返されます。
// ページ内にある pタグ を全て取得
var pTag = document.getElementsByTagName("p");
配列を格納した変数 pTag の中の1番目の要素を取得するには、次のように書きます。
pTag[0]
そして、この要素の中身を書き換えるためには、プロパティ innerHTML を変更します。
// 1番最初に登場する pタグ の中身を書き換える pTag[0].innerHTML = "書き換えたよ！";
これで、ページ内に存在する1番目のpタグの中身が書き換えられました。
複数の同名タグがあった場合
pタグが複数あった時は、以下のようにして各pタグの中身を書き換えることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>javascriptによるDOMのテストページ</title>
</head>
<body>
<h1>タイトルです</h1>
<p>テスト文章です。</p>
<p>2つ目のテスト文章です。</p>
<div>
<p>他のタグに入っている3つ目のテスト文章です。</p>
</div>
</body>
<script>
// ページ内にある pタグ を全て取得
var pTag = document.getElementsByTagName("p");
// 1番最初に登場する pタグ の中身を書き換える
pTag[0].innerHTML = "書き換えたよ！";
// 2番目に登場する pタグ の中身を HTMLタグ を含んだ文章で書き換える
pTag[1].innerHTML = "<strong>2番目も書き換えました！！ タグも使えます！</strong>";
// 別のタグの子要素である3番目のpタグも書き換え
pTag[2].innerHTML = "<em>他のタグに囲まれていても大丈夫！</em>";
</script>
</html>
innerHTML は文章だけではなく、中身のHTMLタグも書き換えることができます。
また、他のタグの子要素も取得できていることがわかります。
ブラウザでこのページを表示した結果は以下のようになります。
以上のように、javascript から DOM を利用して、ページの読み込みが終了した後にページ内の要素を書き換えることができます。
タグ名以外で操作する要素を指定する
今回はDOMで操作する要素を、タグの名前で指定しました。
この他には、タグに含まれている属性で要素を指定する方法があります。次回はそれについて紹介します。