技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

仕事でJavaScriptからDOMを通してHTMLを操作したことはあったけど、今回改めて勉強したのでメモしておく。
 

DOMとは

DOMとは、「Document Object Model」の略である。プログラムから「HTML 文書」や「XML 文書」を利用するための、標準化された仕様を指す。
DOMが生まれた背景として、JavaScriptのようなクライアント側のプログラムを使ってHTMLの内容を動的に変化させる「ダイナミックHTML」という概念の登場がある。登場初期の頃はブラウザごとに制御方法が違っていたので、ブラウザごとに専用のJavaScriptのコードを用意する必要があったが、それが煩わしかったので、制御方法を統一するためにDOMという仕様が生まれた。
 

DOMを構成するもの

HTML文書は、「タグ」「属性」「値」「文書」などの部品で構成されている。この部品のことをノードと呼ぶ。HTML文書がブラウザに読み込まれると、JavaScript 内でこれらの部品が「DOMオブジェクト」として自動的に生成される。
この「DOMオブジェクト」から、メソッドやプロパティを利用する事が出来、メソッドやプロパティを通してHTMLを操作する。
 

ノードとは

ノードとは、節、結節(点)、節点、交点、中心点、集合点、こぶ、膨らみ、などの意味を持つ英単語。ネットワークや木構造など、複数の要素が結びついてできた構造体において、個々の要素のことをノードという。
HTMLでは、開始タグと終了タグの間に別のタグを挟み込むと、タグをネスト(入れ子)にすることが出来るが、これを行うとタグ間で木構造の親子関係を構築することが出来る。今回の場合は「タグ」「属性」「値」「文書」といったものがノードに当たる。
 

ノードの種類について

「DOMオブジェクト」であれば、共通して利用できる基本的な機能として、Nodeというインターフェースが定められている。「Nodeインターフェース」から派生して、12種類のインターフェースが用意されているが、主に利用するインターフェースは以下の4つである。

インターフェース 解説
Document ドキュメント、階層のルートに相当
Element エレメント、要素に相当
Attr アトリビュート、属性に相当
Text テキストノード、タグ以外の文字データに相当

 

Windowオブジェクトとは

Windowオブジェクトとは、ブラウザそのものの情報を保持しているオブジェクトである。例えば、ブラウザの高さのプロパティ(outerHeight)、ブラウザの幅のプロパティ(outerWidth)、アクセスしている位置情報(Location)、閲覧しているHTMLの情報(Document)などを保持している。
 

Documentオブジェクトとは

現在閲覧しているHTML自体を保持しているオブジェクトである。DocumentオブジェクトはWindowオブジェクトに内包されている。DOM(document Object Model)では、documentオブジェクトを通して、個々の要素を取得・操作することが出来る。
 

DOMの操作方法

データの取得方法

メソッド名 解説
getElementById IDをキーにして要素を操作する。
getElementsByClassName クラス名をキーにして要素を操作する。
getElementsByTagName タグ名をキーにして要素を操作する。

 

記述例

document.getElementById("ttl");
document.getElementsByClassName("student");
document.getElementsByTagName("h1");

 

サンプル

処理ボタンをクリックすると、アラートで「成績表」と表示する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function htmlChange() {
   var h1;
   h1 = document.getElementById("ttl").innerHTML;
   alert(h1);
}
</script>

</head>
<body>
<div id="ttl_box"><h1 id="ttl">成績表</h1></div>
<table id="tbl">
<tr><th>名前</th><th>成績</th></tr>
<tr><td class="student">田中</td><td class="score">100</td></tr>
<tr><td class="student">山本</td><td class="score">90</td></tr>
<tr><td class="student">小山</td><td class="score">70</td></tr>
<tr><td class="student">大木</td><td class="score">85</td></tr>
</table>
<div id="add"></div>
<input type="button" value="処理" onclick="htmlChange()" />
</body>
</html>

 

要素の追加・削除方法

メソッド名 解説
createElement 要素を追加する。引数として、追加するタグの名前を指定する。
createTextNode タグの中に含まれるテキスト部分を作成する。
appendChild 子要素として追加する。
removeChild 子要素を削除する。
deleteRow テーブルの要素を削除する。

 

サンプル

処理ボタンをクリックすると、「<strong>平均は86.25点です</strong>」を「<div id=”add”></div>」の子要素として追加し、「<div id=”ttl_box”></div>」の子要素の「<h1 id=”ttl”>成績表</h1>」を削除する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function htmlChange() {
    var heikin;
    heikin = document.createElement('strong');
	var text;
    text = document.createTextNode('平均は86.25点です');
	heikin.appendChild(text);
	var add;
    add = document.getElementById("add");
	add.appendChild(heikin);
	
	ttlBox = document.getElementById("ttl_box");
	ttlBox.removeChild(ttlBox.lastChild);
}
</script>
</head>
<body>
<div id="ttl_box"><h1 id="ttl">成績表</h1></div>
<table id="tbl">
<tr><th>名前</th><th>成績</th></tr>
<tr><td class="student">田中</td><td class="score">100</td></tr>
<tr><td class="student">山本</td><td class="score">90</td></tr>
<tr><td class="student">小山</td><td class="score">70</td></tr>
<tr><td class="student">大木</td><td class="score">85</td></tr>
</table>
<div id="add"></div>
<input type="button"  value="処理" onclick="htmlChange()" />
</body>
</html>

 

CSSを操作する

CSSを変更するには、styleプロパティを利用する。
 

記述例

document.getElementById("ttl").style.color = "red";
document.getElementById("ttl").style.borderBottom = "solid 3px #ccc";
document.getElementById("ttl").style.backgroundColor = "#FFFFCC";
document.getElementById("ttl").style.fontSize = "3em";

 
 
以上
 
 
参考
JavaScriptプログラミング講座【ドキュメントオブジェクトモデル(DOM)について】
JavaScriptでDOMを操作する方法【初心者向け】
ノードとは|node – 意味/定義 : IT用語辞典
学校の教科書

HTMLでコメントアウトが含まれた箇所をコメントアウトする方法 arrow-right
Next post

arrow-left JavaScriptの無名関数・即時関数の使い方
Previous post