JavaScriptプログラミング講座【ドキュメントオブジェクトモデル(DOM)について】

ドキュメントオブジェクトモデル(DOM)について

・	ドキュメントオブジェクトモデル(DOM)とは？
・	任意のエレメントを取得する
・	DOM オブジェクトから親や子を取得する
・	DOM オブジェクトを動的に作成する
・	DOM オブジェクトをノードに登録する
・	DOM オブジェクトをノードから外す
・	DOM オブジェクトの値にアクセスする
・	DOM オブジェクトの属性にアクセスする

前のページに戻る

ドキュメントオブジェクトモデル(DOM)とは？

■ダイナミックHTML について

JavaScript や CSS などのクライアント側のプログラムを使って HTML の内容を動的に変化させる概念を、「ダイナミックHTML」といいます。

「JavaScript」から「HTML の内容」を動的に制御する事ができるので、HTML が変化するインタラクティブなコンテンツを作成する事ができます。

登場初期の頃はブラウザごとに制御方法が違っていたので、ブラウザごとに JavaScript を用意する必要がありました。そこで制御方法を統一するために DOM という仕様が生まれました。

■ドキュメントオブジェクトモデル(DOM)とは？

DOM は、「Document Object Model」の略です。

「HTML 文書」や「XML 文書」を利用するための API で、W3C により、Level 1～Level 3 という段階で勧告されています。

http://www.w3.org/DOM/

DOM に対応しているブラウザ（IE5.0以降など）であれば、 DOM API を利用することで、様々なブラウザで閲覧しても同様の動作が期待できます。

■DOM オブジェクトについて

HTML 文書は、「タグ」「属性」「値」「文書」などの部品で構成されています。

HTML 文書がブラウザに読み込まれると、JavaScript 内でこれらの部品１つ１つが「DOM オブジェクト」として自動的に生成され、メソッドやプロパティを通じてアクセスできるようになります。

「DOM オブジェクト」は様々な種類がありますが、共通で使える基本的な機能として、「ノードインターフェース」というものが定められています。

このページでは主に、ノードインターフェースで供給される機能について解説しています。

■ノードインターフェースについて

「ノードインターフェース」は、「DOM オブジェクト」であれば共通して利用できる基本的な API です。

「ノードインターフェース」には、木構造の親子関係を構築するための機能がまとめられています。

基本となる「ノードインターフェース」から派生して、以下のような 12 種類の「インターフェース」が存在します。

インターフェース	解説
Element	エレメント、要素に相当
Attr	アトリビュート、属性に相当
Text	テキスト、文書に相当
CDATASection	CDATA セクション
EntityReference	エンティティリファレンス
Entity	エンティティ
ProcessingInstruction	処理命令
Comment	コメント
Document	ドキュメント、階層のルートに相当
DocumentType	ドキュメントタイプ
DocumentFragment	ドキュメントフラグメント
Notation	ノーテーション

12 種類ありますが、主に使用するのは「ドキュメント」、「エレメント」、「テキスト」、「アトリビュート」の４つとなります。

大抵の「インターフェース」では、親子関係を構築する機能を利用する事ができますが、種類によっては子を保持できないといった制限があります。

■ドキュメントインターフェースについて

ドキュメントは、ノード全体を管理するための機能がまとめられています。

JavaScript からアクセスするには、document プロパティを使用します。

ドキュメントにアクセスする


alert( document );

document は、ノードのルート（最上位）部分に相当します。

■エレメントインターフェースについて

エレメントは、HTML のタグ（要素）に相当します。

タグ（要素）はエレメントとなる


<span>あいうえお</span>

<div>かきくけこ</div>

<img src="http://hakuhin.jp/test.jpg">

基本的なタグは、「HTMLElement」というインターフェースになります。

タグの種類によってはさらに派生し、専用の機能や、専用のメソッド、プロパティなどを持つ事になります。

例えば、

「DIV」タグは「HTMLDivElement」となります。

「IMG」タグは「HTMLImageElement」となります。

エレメントの種類とタグ名の一覧です。

エレメントの種類	タグ名
HTMLAnchorElement	A
HTMLAppletElement	APPLET
HTMLAreaElement	AREA
HTMLBaseElement	BASE
HTMLBaseFontElement	BASEFONT
HTMLBodyElement	BODY
HTMLBRElement	BR
HTMLButtonElement	BUTTON
HTMLDirectoryElement	DIR
HTMLDivElement	DIV
HTMLDListElement	DL
HTMLElement	BDO、SPAN、SUB、SUP、B、BIG、I、S、SMALL、STRIKE、TT、U、ABBR、ACRONYM、CITE、CODE、DFN、EM、KBD、SAMP、STRONG、VAR、DD、DT、NOFRAMES、NOSCRIPT、ADDRESS、CENTER
HTMLFieldSetElement	FIELDSET
HTMLFontElement	FONT
HTMLFormElement	FORM
HTMLFrameElement	FRAME
HTMLFrameSetElement	FRAMESET
HTMLHeadElement	HEAD
HTMLHeadingElement	H1、H2、H3、H4、H5、H6
HTMLHRElement	HR
HTMLHtmlElement	HTML
HTMLIFrameElement	IFRAME
HTMLImageElement	IMG
HTMLInputElement	INPUT
HTMLIsIndexElement	ISINDEX
HTMLLabelElement	LABEL
HTMLLegendElement	LEGEND
HTMLLIElement	LI
HTMLLinkElement	LINK
HTMLMapElement	MAP
HTMLMenuElement	MENU
HTMLMetaElement	META
HTMLModElement	INS
HTMLObjectElement	OBJECT
HTMLOListElement	OL
HTMLOptGroupElement	OPTGROUP
HTMLOptionElement	OPTION
HTMLParagraphElement	P
HTMLParamElement	PARAM
HTMLPreElement	PRE
HTMLQuoteElement	Q
HTMLScriptElement	SCRIPT
HTMLSelectElement	SELECT
HTMLStyleElement	STYLE
HTMLTableCaptionElement	CAPTION
HTMLTableCellElement	TD
HTMLTableColElement	COL
HTMLTableElement	TABLE
HTMLTableRowElement	TR
HTMLTableSectionElement	TBODY
HTMLTextAreaElement	TEXTAREA
HTMLTitleElement	TITLE
HTMLUListElement	UL

■テキストインターフェースについて

テキストは、タグ以外の普通の文書に相当します。

タグ以外の普通の文書部分がテキストとなる（改行やタブなどもテキストとして扱われる）


アイウ
<span>あいうえお</span>
カキク
<div>かきくけこ</div>
サシス

空白、タブ、改行などの文字であってもすべてテキスト扱いとなります。

テキストは子を持つ事はできません。

■アトリビュートインターフェースについて

アトリビュートは、HTML の属性に相当します。

属性はアトリビュートとなる


<span id="aaa">あいうえお</span>

<div width="300" height="200">かきくけこ</div>

<img src="http://hakuhin.jp/test.jpg">

■ノードによる階層について

開始タグと終了タグの間にさらに別のタグを挟み込むと、タグを入れ子にする事ができます。

タグを入れ子にして記述すると、親子関係を構築する事ができます。DOM 上では、ノードによる木構造の階層で親子関係が表現されます。

例えば、以下のような HTML 文書があったとします。

HTMLで表現した場合


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>タイトル</title>
  </head>

  <body>
    <div>
      わたしは<span style="font-size:24px; color:#FF0000">文書</span>です。
      <img src="http://hakuhin.jp/test.jpg" alt="画像">
    </div>

  </body>
</html>

階層図で表現すると以下のようになります。

ルートは、ドキュメントとなります。document からアクセスできます。

タグは、エレメントとなります。種類がたくさんあります。

文章は、テキストとなります。タブや空白や改行であってもすべてテキストとなります。階層図では、"T" と省略表記しています。

任意の「DOM オブジェクト」を取得するためには、「エレメントに識別名や識別ＩＤを付けて取得」するか、「ルートである document からノードを辿って検索」することになります。

■DOM オブジェクトの構築完了のタイミングについて

JavaScript を実行するための <script> タグは、 HTML 文書中のどこにでも記述できます。

例えば、<script> タグを「HEAD タグ」内に記述した場合、BODY 内の DOM オブジェクトはまだ構築されていません。

…という事で、

「BODY タグを閉じる直前」に記述した JavaScript が実行された場合、ほとんどの DOM オブジェクトが生成され、ノード構築が完了してると考えられます。

DOM オブジェクトがどこまで構築されているか確認してみます。

DOM オブジェクトが構築されているか確認する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--

	// DOM オブジェクトが構築されているかテストする関数
	function DomTest(message){

		console.log(message + "--- START");

		// DIV タグをすべて取得する
		var elements = document.getElementsByTagName("div");

		var i;
		var num = elements.length;
		for(i=0;i<num;i++){
			var element = elements[i];
			console.log("  tag:" + element.tagName + " id:" + element.id );
		}

		console.log(message + "--- END\n\n");
	}

	DomTest("ヘッダで実行");

    //-->
    </script>
  </head>

  <body>

    <script type="text/javascript"><!--
    	DomTest("body の先頭で実行");
    //-->
    </script>

    <div id="element_00">あいう</div>
    <div id="element_01">えおか</div>
    <div id="element_02">きくけ</div>

    <script type="text/javascript"><!--
    	DomTest("body の途中で実行");
    //-->
    </script>

    <div id="element_03">こさし</div>
    <div id="element_04">すせそ</div>
    <div id="element_05">たちつ</div>

    <script type="text/javascript"><!--
    	DomTest("body の最後尾で実行");
    //-->
    </script>

  </body>
</html>

出力結果です。

コンソールログの出力結果


ヘッダで実行--- START
ヘッダで実行--- END

body の先頭で実行--- START
body の先頭で実行--- END

body の途中で実行--- START
  tag:DIV id:element_00
  tag:DIV id:element_01
  tag:DIV id:element_02
body の途中で実行--- END

body の最後尾で実行--- START
  tag:DIV id:element_00
  tag:DIV id:element_01
  tag:DIV id:element_02
  tag:DIV id:element_03
  tag:DIV id:element_04
  tag:DIV id:element_05
body の最後尾で実行--- END

それ以外には、window.onload イベントを利用する方法があります。このイベントを利用すると、ページの読み込みが完了したかがわかります。

画像などのデータも読み込み対象に含まれるので必要以上に待たされる事になります。HTML 文書が読み込まれてから、「可能なかぎり早く JavaScript の実行を開始したい」場合に不向きです。

onload イベントで DOM オブジェクトの構築完了を知る


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--

	// DOM オブジェクトが構築されているかテストする関数
	function DomTest(message){

		console.log(message + "--- START");

		// DIV タグをすべて取得する
		var elements = document.getElementsByTagName("div");

		var i;
		var num = elements.length;
		for(i=0;i<num;i++){
			var element = elements[i];
			console.log("  tag:" + element.tagName + " id:" + element.id );
		}

		console.log(message + "--- END\n\n");
	}

	// ページの読み込み完了時に呼び出されるイベント
	window.onload = function(){
		DomTest("onLoad イベント中に実行");
	}

    //-->
    </script>
  </head>

  <body>

    <div id="element_00">あいう</div>
    <div id="element_01">えおか</div>
    <div id="element_02">きくけ</div>
    <div id="element_03">こさし</div>
    <div id="element_04">すせそ</div>
    <div id="element_05">たちつ</div>

  </body>
</html>

DOMContentLoaded イベントを利用すると、DOM オブジェクトの構築が完了した事がわかります。

このイベントを利用していきたいところですがイベントリスナーは、Internet Explorer 8 では動作しません。

DOMContentLoaded イベントで DOM オブジェクトの構築完了を知る


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--

	// DOM オブジェクトが構築されているかテストする関数
	function DomTest(message){

		console.log(message + "--- START");

		// DIV タグをすべて取得する
		var elements = document.getElementsByTagName("div");

		var i;
		var num = elements.length;
		for(i=0;i<num;i++){
			var element = elements[i];
			console.log("  tag:" + element.tagName + " id:" + element.id );
		}

		console.log(message + "--- END\n\n");
	}

	// イベントリスナーに対応しているか
	if(document.addEventListener){

		// DOM オブジェクトの構築が完了したときに実行されるイベント
		document.addEventListener("DOMContentLoaded", function(e){
			DomTest("DOMContentLoaded イベント中に実行");
		}, false);

	}

    //-->
    </script>
  </head>

  <body>

    <div id="element_00">あいう</div>
    <div id="element_01">えおか</div>
    <div id="element_02">きくけ</div>
    <div id="element_03">こさし</div>
    <div id="element_04">すせそ</div>
    <div id="element_05">たちつ</div>

  </body>
</html>

上に戻る

任意のエレメントを取得する

■名前属性からエレメントを取得する

HTML のタグからエレメントを取得するには以下の方法があります。

■名前属性からエレメントを取得する

１．タグに名前属性を追加する

取得したいタグに、name 属性を追加して、好きな識別名を設定します。

重複した名前を付ける事も可能です。

名前属性を追加する


<div name="test">あいうえお</div>
<span name="test">かきくけこ</span>
<div name="abc">さしすせそ</div>

２．エレメントを取得する

名前からエレメントを取得するには、document.getElementsByName() メソッドを使用します。

引数に取得したい識別名を文字列で指定します。

戻り値からは、該当するエレメントが NodeList オブジェクトに格納された状態で取得できます。 NodeList オブジェクトは配列のように中身を取り出せます。

該当するエレメントが見つからなかった場合は、空の NodeList オブジェクトが得られます。

name 属性が "test" であるエレメントを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--
	// HTML の読み込みが完了したときに実行されるイベント
	window.onload = function(){

		// 指定した名前属性を持つエレメントを NodeList で取得
		var elements = document.getElementsByName("test");
	
		var i;
		var num = elements.length;
		for(i=0;i < num;i++){
			var element = elements[i];
		
			console.log("tag:" + element.tagName + " html:" + element.innerHTML);
		}
	}

    //-->
    </script>
  </head>

  <body>

    <div name="test">あいうえお</div>
    <span name="test">かきくけこ</span>
    <div name="abc">さしすせそ</div>

  </body>
</html>

■ID 属性からエレメントを取得する

１．タグに ID 属性を追加する

取得したいタグに、id 属性を追加して、好きな識別名を設定します。

重複した ID をつける事はできません。ID はユニーク（唯一）である必要があります。

ID 属性を追加する


<div id="abc">あいうえお</div>
<span id="def">かきくけこ</span>
<div id="ghi">さしすせそ</div>

２．エレメントを取得する

ID からエレメントを取得するには、document.getElementById() メソッドを使用します。

引数に取得したい識別名を文字列で指定します。

戻り値からは、該当するエレメント(１つ)が取得できます。見つからなかった場合は null が得られます。

name 属性が "test" であるエレメントを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--
	// HTML の読み込みが完了したときに実行されるイベント
	window.onload = function(){

		// 指定した ID 属性を持つエレメントを取得
		var element = document.getElementById("ghi");

		if(element){
			console.log("tag:" + element.tagName + " html:" + element.innerHTML);
		}
	}

    //-->
    </script>
  </head>

  <body>

    <div id="abc">あいうえお</div>
    <span id="def">かきくけこ</span>
    <div id="ghi">さしすせそ</div>

  </body>
</html>

■タグ名からエレメントを取得する

１．タグを追加する

取得したいタグを適当に用意します。

タグを適当に用意する


<div>あいうえお</div>
<span>かきくけこ</span>
<div>さしすせそ</div>

２．エレメントを取得する

タグ名（要素）からエレメントを取得するには、
document.getElementsByTagName() メソッドを使用します。

引数に取得したいタグ名を文字列で指定します。

該当するエレメントが見つからなかった場合は、空の NodeList オブジェクトが得られます。

name 属性が "test" であるエレメントを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--
	// HTML の読み込みが完了したときに実行されるイベント
	window.onload = function(){

		// 指定したタグ名を持つエレメントを NodeList で取得
		var elements = document.getElementsByTagName("div");

		var i;
		var num = elements.length;
		for(i=0;i < num;i++){
			var element = elements[i];
		
			console.log("tag:" + element.tagName + " html:" + element.innerHTML);
		}
	}

    //-->
    </script>
  </head>

  <body>

    <div>あいうえお</div>
    <span>かきくけこ</span>
    <div>さしすせそ</div>

  </body>
</html>

BODY エレメントを取得する

BODY エレメントを取得するには、
document.body プロパティを使用します。

body エレメントを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--
	// HTML の読み込みが完了したときに実行されるイベント
	window.onload = function(){

		// BODY エレメントを取得
		var element = document.body;
		console.log("tag:" + element.tagName + " type:" + element.nodeType);
	}

    //-->
    </script>
  </head>

   <body>

   <div>あいうえお</div>
    <span>かきくけこ</span>
    <div>さしすせそ</div>

   </body>
</html>

上に戻る

エレメントから親や子を取得する

■エレメントから親や子を取得する

「ドキュメント」や「エレメント」や「テキスト」がノードに登録済みである場合、ノード情報を辿って親や子の DOM オブジェクトにアクセスすることができます。

取得できる DOM オブジェクトは、以下の種類があります。

■親 DOM オブジェクトを取得する

■直前（隣）の DOM オブジェクトを取得する

■直後（隣）の DOM オブジェクトを取得する

■最先頭の子 DOM オブジェクトを取得する

■最後尾の子 DOM オブジェクトを取得する

■すべての子 DOM オブジェクトを取得する

■ノードのタイプを調べる

得られる DOM オブジェクトのタイプを調べたい場合は、nodeType プロパティを使用します。

以下の document 内に定義されている定数と一致するか調べます。

以下の定数が存在しないブラウザもあるので、自前で定数を用意することになります。

名称	番号	解説
ELEMENT_NODE	1	エレメントノード、要素に相当
ATTRIBUTE_NODE	2	アトリビュートノード、属性に相当
TEXT_NODE	3	テキストノード、文書に相当
CDATA_SECTION_NODE	4	CDATA セクションノード
ENTITY_REFERENCE_NODE	5	エンティティリファレンスノード
ENTITY_NODE	6	エンティティノード
PROCESSING_INSTRUCTION_NODE	7	処理命令ノード
COMMENT_NODE	8	コメントノード
DOCUMENT_NODE	9	ドキュメントノード、階層のルートに相当
DOCUMENT_TYPE_NODE	10	ドキュメントタイプノード
DOCUMENT_FRAGMENT_NODE	11	ドキュメントフラグメントノード
NOTATION_NODE	12	ノーテーションノード

取得例です。

document からすべての子のタイプを再帰的に調べる


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--
	// 定数が存在しなければ作成
	if(!(document.ELEMENT_NODE)){
		document.ELEMENT_NODE = 1;
		document.ATTRIBUTE_NODE = 2;
		document.TEXT_NODE = 3;
		document.CDATA_SECTION_NODE = 4;
		document.ENTITY_REFERENCE_NODE = 5;
		document.ENTITY_NODE = 6;
		document.PROCESSING_INSTRUCTION_NODE = 7;
		document.COMMENT_NODE = 8;
		document.DOCUMENT_NODE = 9;
		document.DOCUMENT_TYPE_NODE = 10;
		document.DOCUMENT_FRAGMENT_NODE = 11;
		document.NOTATION_NODE = 12;
	}

    //-->
    </script>

  </head>

  <body>

    <div>あいう</div>
    <div>えおか</div>
    <div>
      <span>こさし</span>
      <span>すせそ</span>
    </div>

    <script type="text/javascript">
    <!--
	// ノードのタイプを出力する再帰関数
	function NodeTraceTypeRecursive(node){

		var str = "";

		// 階層パス
		str += "パス:" + NodeGetPath(node) + " ";

		// ノードの種類
		str += "タイプ:";
		switch(node.nodeType){
		case document.ELEMENT_NODE:
			str += "ELEMENT_NODE";
			break;
		case document.ATTRIBUTE_NODE:
			str += "ATTRIBUTE_NODE";
			break;
		case document.TEXT_NODE:
			str += "TEXT_NODE";
			break;
		case document.CDATA_SECTION_NODE:
			str += "CDATA_SECTION_NODE";
			break;
		case document.ENTITY_REFERENCE_NODE:
			str += "ENTITY_REFERENCE_NODE";
			break;
		case document.ENTITY_NODE:
			str += "ENTITY_NODE";
			break;
		case document.PROCESSING_INSTRUCTION_NODE:
			str += "PROCESSING_INSTRUCTION_NODE";
			break;
		case document.COMMENT_NODE:
			str += "COMMENT_NODE";
			break;
		case document.DOCUMENT_NODE:
			str += "DOCUMENT_NODE";
			break;
		case document.DOCUMENT_TYPE_NODE:
			str += "DOCUMENT_TYPE_NODE";
			break;
		case document.DOCUMENT_FRAGMENT_NODE:
			str += "DOCUMENT_FRAGMENT_NODE";
			break;
		case document.NOTATION_NODE:
			str += "NOTATION_NODE";
			break;
		default:
			str += "その他(" + node.nodeType + ")";
			break;
		}

		// コンソール出力
		console.log(str);

		// 子ノードを検索
		var child_nodes = node.childNodes;
		var i;
		var num = child_nodes.length;
		for(i=0;i < num;i++){
			var child_node = child_nodes[i];
			NodeTraceTypeRecursive(child_node);
		}
	}

	// 階層のパスを調べる関数
	function NodeGetPath(node){
		var str = node.nodeName;

		while(true){
			var parent = node.parentNode;
			if(!parent)	break;

			str = parent.nodeName + "." + str;
			node = parent;
		}

		return str;
	}

	// ドキュメントから出力を開始
	NodeTraceTypeRecursive(document);

    //-->
    </script>

  </body>
</html>

■タグ名を調べる

自身がエレメントである場合、タグ名を調べる事ができます。

エレメントのタグ名を調べたい場合は、tagName プロパティを使用します。

このプロパティは、ドキュメントやテキストには存在しません。

取得例です。

タグ名を調べる


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>

    <script type="text/javascript">
    <!--
	// 定数が存在しなければ作成
	if(!(document.ELEMENT_NODE)){
		document.ELEMENT_NODE = 1;
		document.ATTRIBUTE_NODE = 2;
		document.TEXT_NODE = 3;
		document.CDATA_SECTION_NODE = 4;
		document.ENTITY_REFERENCE_NODE = 5;
		document.ENTITY_NODE = 6;
		document.PROCESSING_INSTRUCTION_NODE = 7;
		document.COMMENT_NODE = 8;
		document.DOCUMENT_NODE = 9;
		document.DOCUMENT_TYPE_NODE = 10;
		document.DOCUMENT_FRAGMENT_NODE = 11;
		document.NOTATION_NODE = 12;
	}

    //-->
    </script>

  </head>

  <body>

    <div id = "element_test">あいう</div>

    <script type="text/javascript">
    <!--
	// element_test という ID のエレメントを取得する
	var element = document.getElementById("element_test");

	// エレメントであるか確認する
	if(element.nodeType == document.ELEMENT_NODE){
		// タグ名を出力する
		console.log(element.tagName);
	}

    //-->
    </script>

  </body>
</html>

■ノード名を調べる

ノード名を調べたい場合は、nodeName プロパティを使用します。

ドキュメントであれば "#document" という文字列

エレメントであればタグ名

テキストであれば "#text" という文字列

が取得できます。

ノードの種類	得られる文字列
ELEMENT_NODE	タグ名
ATTRIBUTE_NODE	アトリビュート（属性）の名前
TEXT_NODE	文字列 "#text"
CDATA_SECTION_NODE	文字列 "#cdata-section"
ENTITY_REFERENCE_NODE	エンティティリファレンスノードの名前
ENTITY_NODE	エンティティ名
PROCESSING_INSTRUCTION_NODE	処理命令の名前
COMMENT_NODE	文字列 "#comment"
DOCUMENT_NODE	文字列 "#document"
DOCUMENT_TYPE_NODE	ドキュメントタイプ名
DOCUMENT_FRAGMENT_NODE	文字列 "#document-fragment"
NOTATION_NODE	ノーテーション名

取得例です。

ノード名を調べる


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id = "element_test">あいう</div>

    <script type="text/javascript">
    <!--
	// element_test という ID のエレメントを取得する
	var element = document.getElementById("element_test");

	// ノード名を出力する
	console.log(element.nodeName);

    //-->
    </script>

  </body>
</html>

■親 DOM オブジェクトを取得する

自身の「親の DOM オブジェクト」を取得するには、parentNode プロパティを使用します。

自身が親のノードに登録されていれば、親の DOM オブジェクトが取得できます。大抵は何らかのエレメントになります。

自身がノードに登録されていない場合や、親が取得できない場合は、null が得られます。

取得例です。

１つ上の親 DOM オブジェクトを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa">
      <div id="bbb"></div>
    </div>

    <script type="text/javascript">
    <!--
	var element_my;
	var element_new;
	var node_parent;

	// bbb という ID のエレメントを取得する
	element_my = document.getElementById("bbb");
	// １つ上の親の DOM オブジェクトを取得する
	node_parent = element_my.parentNode;
	// 出力テスト
	console.log("node:" + node_parent.nodeName + " type:" + node_parent.nodeType + " id:" + node_parent.id);

	// 適当なエレメントを作成する
	element_new = document.createElement("div");
	// 出力テスト（DOMに登録していない）
	console.log(element_new.parentNode);

    //-->
    </script>

  </body>
</html>

■直前（隣）の DOM オブジェクトを取得する

自身の「直前（隣）の DOM オブジェクト」を取得するには、previousSibling プロパティを使用します。

自身がノードに登録されていない場合や、自身が最先頭に位置している為に隣が存在しない場合は、null が得られます。

タグとタグの間に空白やタブや改行が無い場合、順序良くエレメントを取得できますが、大抵は HTML を見やすくするために改行やインデントを入れるので、タグとタグの間にテキストが存在する事になります。

取得例です。

直前（隣）の DOM オブジェクトを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa"><span id="bbb"></span><span id="ccc"></span></div>

    <script type="text/javascript">
    <!--
	var element_my;
	var element_new;
	var node_prev;

	// ccc という ID のエレメントを取得する
	element_my = document.getElementById("ccc");
	// 直前（隣）の DOM オブジェクトを取得する
	node_prev = element_my.previousSibling;
	// 出力テスト
	console.log("node:" + node_prev.nodeName + " type:" + node_prev.nodeType + " id:" + node_prev.id);

	// bbb という ID のエレメントを取得する
	element_my = document.getElementById("bbb");
	// 直前（隣）の DOM オブジェクトを取得する
	node_prev = element_my.previousSibling;
	// 出力テスト(ノードの最先頭なので存在しない)
	console.log(node_prev);

	// 適当なエレメントを作成する
	var element_new = document.createElement("div");
	// 出力テスト（まだノードに登録していない）
	console.log(element_new.previousSibling);

    //-->
    </script>

  </body>
</html>

■直後（隣）の DOM オブジェクトを取得する

自身の「直後（隣）の DOM オブジェクト」を取得するには、nextSibling プロパティを使用します。

自身がノードに登録されていない場合や、自身が最後尾に位置している為に隣が存在しない場合は、null が得られます。

取得例です。

直後（隣）の DOM オブジェクトを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa"><span id="bbb"></span><span id="ccc"></span></div>

    <script type="text/javascript">
    <!--
	var element_my;
	var element_new;
	var node_next;

	// bbb という ID のエレメントを取得する
	element_my = document.getElementById("bbb");
	// 直後（隣）の DOM オブジェクトを取得する
	node_next = element_my.nextSibling;
	// 出力テスト
	console.log("node:" + node_next.nodeName + " type:" + node_next.nodeType + " id:" + node_next.id);

	// ccc という ID のエレメントを取得する
	element_my = document.getElementById("ccc");
	// 直後（隣）の DOM オブジェクトを取得する
	node_next = element_my.nextSibling;
	// 出力テスト(ノードの端なので存在しない)
	console.log(node_next);

	// 適当なエレメントを作成する
	var element_new = document.createElement("div");
	// 出力テスト（まだノードに登録していない）
	console.log(element_new.nextSibling);

    //-->
    </script>

  </body>
</html>

■最先頭の子 DOM オブジェクトを取得する

自身の「最先頭の子 DOM オブジェクト」を取得するには、firstChild プロパティを使用します。

「子が１つも存在しない」場合や「テキストなどの子を保有できない DOM オブジェクト」である場合、null が得られます。

取得例です。

最先頭の子 DOM オブジェクトを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa"><span id="bbb"></span><span id="ccc"></span></div>

    <script type="text/javascript">
    <!--
	var element_my;
	var element_new;
	var node_child_first;

	// aaa という ID のエレメントを取得する
	element_my = document.getElementById("aaa");
	// 最先頭の子 DOM オブジェクトを取得する
	node_child_first = element_my.firstChild;
	// 出力テスト
	console.log("node:" + node_child_first.nodeName + " type:" + node_child_first.nodeType + " id:" + node_child_first.id);

	// ccc という ID のエレメントを取得する
	element_my = document.getElementById("ccc");
	// 最先頭の子 DOM オブジェクトを取得する
	node_child_first = element_my.firstChild;
	// 出力テスト(子が無い)
	console.log(node_child_first);

	// 適当なエレメントを作成する
	var element_new = document.createElement("div");
	// 出力テスト（まだノードに登録していない）
	console.log(element_new.firstChild);

    //-->
    </script>

  </body>
</html>

■最後尾の子 DOM オブジェクトを取得する

自身の「最後尾の子 DOM オブジェクト」を取得するには、lastChild プロパティを使用します。

「子が１つも存在しない」場合や「テキストなどの子を保有できない DOM オブジェクト」である場合、null が得られます。

取得例です。

最後尾の子 DOM オブジェクトを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa"><span id="bbb"></span><span id="ccc"></span></div>

    <script type="text/javascript">
    <!--
	var element_my;
	var element_new;
	var node_child_last;

	// aaa という ID のエレメントを取得する
	element_my = document.getElementById("aaa");
	// 最後尾の子 DOM オブジェクトを取得する
	node_child_last = element_my.lastChild;
	// 出力テスト
	console.log("node:" + node_child_last.nodeName + " type:" + node_child_last.nodeType + " id:" + node_child_last.id);

	// ccc という ID のエレメントを取得する
	element_my = document.getElementById("ccc");
	// 最後尾の子 DOM オブジェクトを取得する
	node_child_last = element_my.lastChild;
	// 出力テスト(子が無い)
	console.log(node_child_last);

	// 適当なエレメントを作成する
	var element_new = document.createElement("div");
	// 出力テスト（まだノードに登録していない）
	console.log(element_new.lastChild);

    //-->
    </script>

  </body>
</html>

■すべての子 DOM オブジェクトを取得する

自身の「すべての子 DOM オブジェクト」を取得するには、childNodes プロパティを使用します。

子となる DOM オブジェクトが NodeList オブジェクトに格納された状態で取得できます。 NodeList オブジェクトは配列のように中身を取り出せます。

子が１つも存在しない場合は、空の NodeList オブジェクトが得られます。

取得例です。

子の DOM オブジェクトを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa" >アイウ<span id="bbb">あいうえお</span>カキク<span id="ccc">かきくけこ</span>サシス</div>

    <script type="text/javascript">
    <!--
	var element;

	// aaa という ID のエレメントを取得する
	element = document.getElementById("aaa");

	// 子を保有できるか調べる(childNodes プロパティが存在するか)
	if(element.childNodes){
		
		var i;
		var num = element.childNodes.length;
		for(i=0;i < num;i++){
			var node_child = element.childNodes[i];
			// 出力テスト
			console.log("node:" + node_child.nodeName + " type:" + node_child.nodeType + " id:" + node_child.id);
		}
	}

    //-->
    </script>

  </body>
</html>

■子 DOM オブジェクトが存在するか調べる

自身が「子 DOM オブジェクトを保有しているか？」を確認するには、hasChildNodes() メソッドを使用します。

子が 1 個以上存在する場合は、true が得られます。

「子が 0 個」であるか、「子が保有できない DOM オブジェクト」であれば false が得られます。

取得例です。

子の DOM オブジェクトが存在するか調べる


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa" ><span id="bbb"></span><span id="ccc"></span></div>

    <script type="text/javascript">
    <!--
	var element;

	// aaa という ID のエレメントを取得する
	element = document.getElementById("aaa");
	// 出力テスト
	console.log("tag:" + element.tagName + " child:" + element.hasChildNodes() + " num:" + element.childNodes.length);

	// bbb という ID のエレメントを取得する
	element = document.getElementById("bbb");
	// 出力テスト
	console.log("tag:" + element.tagName + " child:" + element.hasChildNodes() + " num:" + element.childNodes.length);

    //-->
    </script>

  </body>
</html>

上に戻る

DOM オブジェクトを動的に作成する

■DOM オブジェクトを動的に作成する

DOM オブジェクトを動的に作成するには、以下の方法があります。

■エレメントを動的に作成する

■テキストを動的に作成する

■HTML 文書から DOM オブジェクトを構築する

■エレメントを動的に作成する

エレメントを動的に作成するには、document.createElement()メソッドを使用します。

引数に、作成したいタグ名（要素）を文字列で指定します。

作成したエレメントをブラウザ上で表示するには、エレメントを任意のノードに登録する必要があります。

DIV のエレメントを作成する


// 「DIV エレメント」を作成する
var element = document.createElement("div");

// HTML 文字列をセット
element.innerHTML = "表示テスト";

// ノードに登録する
document.body.appendChild(element);

指定できるタグ名と、得られるエレメントオブジェクトの一覧です。

引数で指定するタグ名	得られるエレメントオブジェクト
A	HTMLAnchorElement
APPLET	HTMLAppletElement
AREA	HTMLAreaElement
BASE	HTMLBaseElement
BASEFONT	HTMLBaseFontElement
BODY	HTMLBodyElement
BR	HTMLBRElement
BUTTON	HTMLButtonElement
DIR	HTMLDirectoryElement
DIV	HTMLDivElement
DL	HTMLDListElement
FIELDSET	HTMLFieldSetElement
FONT	HTMLFontElement
FORM	HTMLFormElement
FRAME	HTMLFrameElement
FRAMESET	HTMLFrameSetElement
HEAD	HTMLHeadElement
H1、H2、H3、H4、H5、H6	HTMLHeadingElement
HR	HTMLHRElement
HTML	HTMLHtmlElement
IFRAME	HTMLIFrameElement
IMG	HTMLImageElement
INPUT	HTMLInputElement
ISINDEX	HTMLIsIndexElement
LABEL	HTMLLabelElement
LEGEND	HTMLLegendElement
LI	HTMLLIElement
LINK	HTMLLinkElement
MAP	HTMLMapElement
MENU	HTMLMenuElement
META	HTMLMetaElement
INS	HTMLModElement
OBJECT	HTMLObjectElement
OL	HTMLOListElement
OPTGROUP	HTMLOptGroupElement
OPTION	HTMLOptionElement
P	HTMLParagraphElement
PARAM	HTMLParamElement
PRE	HTMLPreElement
Q	HTMLQuoteElement
SCRIPT	HTMLScriptElement
SELECT	HTMLSelectElement
STYLE	HTMLStyleElement
CAPTION	HTMLTableCaptionElement
TD	HTMLTableCellElement
COL	HTMLTableColElement
TABLE	HTMLTableElement
TR	HTMLTableRowElement
TBODY	HTMLTableSectionElement
TEXTAREA	HTMLTextAreaElement
TITLE	HTMLTitleElement
UL	HTMLUListElement
その他の文字列	HTMLElement

■テキストを動的に作成する

テキストを動的に作成するには、document.createTextNode()メソッドを使用します。

引数にはブラウザに表示したい文字列を指定します。省略はできません。値を後で変更することも可能です。

作成したテキストをブラウザ上で表示するには、テキストを任意のノードに登録する必要があります。

テキストを作成する


// テキストを作成する
var text = document.createTextNode("表示テスト");

// 文字列をセット
text.nodeValue = "表示テスト";

// ノードに登録する
document.body.appendChild(text);

上に戻る

DOM オブジェクトをノードに登録する

■DOM オブジェクトをブラウザで表示するには？

「DOM オブジェクト」を、「document を基点とする木構造」のどこかのノードに登録すると、その「DOM オブジェクト」はブラウザに表示されるようになります。

「DOM オブジェクト」からノードを辿って document まで辿りつけないのであれば、その「DOM オブジェクト」はブラウザに表示されません。

「HTML 文書」がブラウザに読み込まれた際に自動的に生成される「静的な DOM オブジェクト」は、文書の記述に従いそのまま自動的にノードに登録されます。

JavaScript から生成した「動的な DOM オブジェクト」は、以下のメソッドを使用してどこかのノードに登録する必要があります。

■DOM オブジェクトをノードに登録する

「任意の DOM オブジェクト」を、別の「任意の DOM オブジェクト」のノードに登録するには、以下の方法があります。

■DOM オブジェクトの直前（隣）に登録する

■DOM オブジェクトの直後（隣）に登録する

■DOM オブジェクトの最先頭の子に登録する

■DOM オブジェクトの最後尾の子に登録する

■登録済みの DOM オブジェクトと交換する

■DOM オブジェクトの直前（隣）に登録する

「任意の DOM オブジェクト」の直前（隣）に「別の任意の DOM オブジェクト」を登録するには、insertBefore()メソッドを使用します。

「基点となる DOM オブジェクト」の「親 DOM オブジェクト」から insertBefore() メソッドを呼び出して、

第01引数に「登録したい DOM オブジェクト」

第02引数に「基点となる DOM オブジェクト」を指定します。

「親 DOM オブジェクト」は、「基点となる DOM オブジェクト」の parentNode プロパティから取得するといいでしょう。

動的に作成したボタンを直前（隣）に登録する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <textarea id="edit"></textarea>

    <script type="text/javascript">
    <!--

	// edit という ID のエレメントを取得する
	var element_edit = document.getElementById("edit");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";
	
	// 直前に登録
	NodeInsertBefore(element_button,element_edit);
	
	// ------------------------------------------------------------
	// 「基点ノード」の直前に「新しいノード」を登録する関数
	//
	// 第01引数 新しいノード
	// 第02引数 基点ノード
	// 返り値 成功すれば true、失敗すれば false
	// ------------------------------------------------------------
	function NodeInsertBefore(node_new,node_ref){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

		var node =  parent.insertBefore(node_new,node_ref);
		return (node == node_new);
	}

    //-->
    </script>

  </body>
</html>

■DOM オブジェクトの直後（隣）に登録する

「任意の DOM オブジェクト」の直後（隣）に「別の任意の DOM オブジェクト」を登録する関数はありません。insertBefore() メソッドで代用します。

「基点となる DOM オブジェクト」の直後（隣）に存在する「DOM オブジェクト」を取得して、直前（隣）に登録します。

insertBefore() メソッドの第02引数が null だった場合は、「親 DOM オブジェクト」の「最後尾の子」として登録されます。

動的に作成したボタンを直後（隣）に登録する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <textarea id="edit"></textarea>

    <script type="text/javascript">
    <!--

	// edit という ID のエレメントを取得する
	var element_edit = document.getElementById("edit");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";
	
	// 直後に登録
	NodeInsertAfter(element_button,element_edit);
	
	// ------------------------------------------------------------
	// 「基点ノード」の直後に「新しいノード」を登録する関数
	//
	// 第01引数 新しいノード
	// 第02引数 基点ノード
	// 返り値 成功すれば true、失敗すれば false
	// ------------------------------------------------------------
	function NodeInsertAfter(node_new,node_ref){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

		var node =  parent.insertBefore(node_new,node_ref.nextSibling);
		return (node == node_new);
	}

    //-->
    </script>

  </body>
</html>

■DOM オブジェクトの最先頭の子に登録する

「任意の DOM オブジェクト」の最先頭の子に「別の任意の DOM オブジェクト」を登録する関数はありません。insertBefore() メソッドで代用します。

「基点となる DOM オブジェクト」の「最先頭の子 DOM オブジェクト」を取得して、直前（隣）に登録します。

insertBefore() メソッドの第02引数が null だった場合は、「親 DOM オブジェクト」の「最後尾の子」として登録されます。

テキストに、任意の「DOM オブジェクト」を子として登録することはできません。

動的に作成したボタンを子の最先頭に登録する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="form"><textarea></textarea></div>

    <script type="text/javascript">
    <!--

	// form という ID のエレメントを取得する
	var element_form = document.getElementById("form");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";
	
	// 子の最先頭に登録
	NodeInsertFirstChild(element_button,element_form);
	
	// ------------------------------------------------------------
	// 「基点ノード」の子の最先頭に「新しいノード」を登録する関数
	//
	// 第01引数 新しいノード
	// 第02引数 基点ノード
	// 返り値 成功すれば true、失敗すれば false
	// ------------------------------------------------------------
	function NodeInsertFirstChild(node_new,node_ref){
		try{
			var child = node_ref.firstChild;
			var node =  node_ref.insertBefore(node_new,child);
			return (node == node_new);
		}catch(e){
			return false;
		}
	}

    //-->
    </script>

  </body>
</html>

■DOM オブジェクトの最後尾の子に登録する

「任意の DOM オブジェクト」の最後尾の子に「別の任意の DOM オブジェクト」を登録するには、appendChild()メソッドを使用します。

「基点となる DOM オブジェクト」から appendChild() メソッドを呼び出して、引数に「登録したい DOM オブジェクト」を指定します。

テキストに、任意の「DOM オブジェクト」を子として登録することはできません。

動的に作成したボタンを子の最後尾に登録する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="form"><textarea></textarea></div>

    <script type="text/javascript">
    <!--

	// form という ID のエレメントを取得する
	var element_form = document.getElementById("form");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";
	
	// 子の最先頭に登録
	NodeInsertLastChild(element_button,element_form);
	
	// ------------------------------------------------------------
	// 「基点ノード」の子の最後尾に「新しいノード」を登録する関数
	//
	// 第01引数 新しいノード
	// 第02引数 基点ノード
	// 返り値 成功すれば true、失敗すれば false
	// ------------------------------------------------------------
	function NodeInsertLastChild(node_new,node_ref){
		try{
			var node =  node_ref.appendChild(node_new);
			return (node == node_new);
		}catch(e){
			return false;
		}
	}

    //-->
    </script>

  </body>
</html>

■登録済みの DOM オブジェクトと交換する

「任意の登録済みの DOM オブジェクト」と「別の任意の DOM オブジェクト」を交換するには、replaceChild()メソッドを使用します。

「交換前 DOM オブジェクト」の「親 DOM オブジェクト」から replaceChild() メソッドを呼び出して、

第01引数に「交換後 DOM オブジェクト」

第02引数に「交換前 DOM オブジェクト」を指定します。

「親 DOM オブジェクト」は、「交換前 DOM オブジェクト」の parentNode プロパティから取得するといいでしょう。

「交換前 DOM オブジェクト」と子とのノードの接続状態は維持されます。つまり、子もまとめて交換対象となります。

動的に作成したボタンと静的なエレメントとを交換する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="form"><textarea></textarea></div>

    <script type="text/javascript">
    <!--

	// form という ID のエレメントを取得する
	var element_form = document.getElementById("form");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";
	
	// 子の最先頭に登録
	NodeReplace(element_button,element_form);
	
	// ------------------------------------------------------------
	// 「基点ノード」と「新しいノード」を交換する関数
	//
	// 第01引数 新しいノード
	// 第02引数 基点ノード
	// 返り値 成功すれば true、失敗すれば false
	// ------------------------------------------------------------
	function NodeReplace(node_new,node_ref){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

		var node =  parent.replaceChild(node_new,node_ref);
		return (node == node_new);
	}

    //-->
    </script>

  </body>
</html>

上に戻る

DOM オブジェクトをノードから外す

■DOM オブジェクトをノードから外す

「任意の DOM オブジェクト」をノードから外すには、removeChild()メソッドを使用します。

「DOM オブジェクト」の「親 DOM オブジェクト」から removeChild() メソッドを呼び出して、引数に「DOM オブジェクト」を指定します。

「親 DOM オブジェクト」は、「DOM オブジェクト」の parentNode プロパティから取得するといいでしょう。

「外す DOM オブジェクト」と子とのノードの接続状態は維持されます。つまり、子もまとめて除外対象となります。

DOM オブジェクトをノードから外す


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="form"><textarea></textarea></div>

    <script type="text/javascript">
    <!--

	// form という ID のエレメントを取得する
	var element_form = document.getElementById("form");

	// ノードから外す
	NodeRemove(element_form);
	
	// ------------------------------------------------------------
	// ノードから外す関数
	//
	// 第01引数 ノード
	// 返り値 成功すれば true、失敗すれば false
	// ------------------------------------------------------------
	function NodeRemove(node_ref){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

		var node =  parent.removeChild(node_ref);
		return (node == node_ref);
	}

    //-->
    </script>

  </body>
</html>

上に戻る

DOM オブジェクトの値にアクセスする

■DOM オブジェクトの値にアクセスする

「DOM オブジェクト」の値にアクセスするには、以下の方法があります。

■エレメントの値にアクセスする

■テキストの値にアクセスする

■エレメントの値にアクセスする（HTML 文書から DOM オブジェクトを構築する）

エレメントの値にアクセスするには、innerHTML プロパティを使用します。

このプロパティに HTML 文字列を渡すと、文書の書式に従い DOM オブジェクトがまとめて構築されます。

JavaScript から HTML の表示をまとめて変更するのに便利ですが、注意点もあります。

innerHTML プロパティから DOM オブジェクトを構築する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="form"></div>

    <script type="text/javascript">
    <!--

	// form という ID のエレメントを取得する
	var element_form = document.getElementById("form");

	// HTML 文字列を渡す
	element_form.innerHTML = "<textarea>表示テスト</textarea><input type=\"button\" value=\"ボタン\">";

    //-->
    </script>

  </body>
</html>

innerHTM プロパティを変更すると、それまで存在していた「子の DOM オブジェクト」のノードがすべて外れます。セットした「HTML 文書の書式」に従い、 DOM オブジェクトが新規に作成されノードが構築されます。

前回とまったく同じ「HTML 文字列」をセットしたとしても、すべての「子の DOM オブジェクト」が一新されます。

このとき「除外された DOM オブジェクト」への参照が残っていなければ、そのまま消滅することになります。

■テキストの値にアクセスする

テキストの値を変更するには、nodeValue プロパティを使用します。

nodeValue プロパティに文字列を渡すと、その文字がブラウザに表示されます。

テキストの文字を変更する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <script type="text/javascript">
    <!--
	// テキストを作成する
	var text = document.createTextNode("");

	// 文字列をセット
	text.nodeValue = "表示テスト";

	// ノードに登録する
	document.body.appendChild(text);

    //-->
    </script>

  </body>
</html>

上に戻る

DOM オブジェクトの属性にアクセスする

■DOM オブジェクトの属性にアクセスする

属性は、テキストには存在しません。

「任意の DOM オブジェクト」から属性を扱うには、以下の方法があります。

■Attr オブジェクトを作成する

■DOM オブジェクトから属性をまとめて取得する

■エレメントから属性を取得する

■エレメントに属性を追加する

■エレメントから属性を除外する

■Attr オブジェクトを作成する

Attr インターフェースは、属性を取り扱うための機能がまとめられています。

Attr オブジェクトを作成するには、document.createAttribute() メソッドを使用します。

引数に属性名を指定します。属性名を後で変更する事はできません。

"test" という名前の Attr オブジェクトを作成する


var attr_obj = document.createAttribute("test");

name プロパティを使用すると、属性名を取得することができます。読み取り専用です。書き込みを試みるとエラーとなります。

Attr オブジェクトの属性名を取得する


var attr_obj = document.createAttribute("test");
alert(attr_obj.name);

■Attr オブジェクトの属性値にアクセスする

Attr オブジェクトの属性値にアクセスするには、value プロパティを使用します。

value プロパティには、String 型のみを格納する事ができます。数値などのデータの書き込みを試みるとすべて文字列に変換されます。

Attr オブジェクトの属性値にアクセスする


// Attr オブジェクトを作成する
var attr_obj = document.createAttribute("test");

// Attr オブジェクトの属性値に文字列データを格納する
attr_obj.value = "テスト";

// Attr オブジェクトの属性値を取得する
alert(attr_obj.value);

■DOM オブジェクトから属性をまとめて取得する

「DOM オブジェクト」が持つ属性をすべて取得するには、 attributes プロパティを使用します。

Attr オブジェクトが NamedNodeMap オブジェクトに格納された状態で取得できます。 NamedNodeMap オブジェクトは配列のように中身を取り出せます。

属性が存在しない場合は、空の NamedNodeMap オブジェクトが得られます。

テキストなど属性を保有できない「DOM オブジェクト」である場合は、null が得られます。

エレメントの属性をすべて取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="test" name="aaa" width="400" height="300">あいうえお</div>
 
    <script type="text/javascript">
    <!--
	// test という ID のエレメントを取得する
	var element = document.getElementById("test");

	// 属性をすべて取得する
	var attributes = element.attributes;

	var i;
	var num = attributes.length;
	for(i=0;i < num;i++){
		var attr_obj = attributes[i];
		console.log("name:" + attr_obj.name + " value:" + attr_obj.value);
	}

    //-->
    </script>

  </body>
</html>

■属性が存在するか調べる

自身が「属性を保有しているか？」を確認するには、hasAttributes() メソッドを使用します。

属性が 1 個以上存在する場合は、true が得られます。

「属性が 0 個」であるか、「属性を保有できない DOM オブジェクト」であれば false が得られます。

取得例です。

属性が存在するか調べる


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="aaa" ></div>

    <script type="text/javascript">
    <!--
	var element;

	// aaa という ID のエレメントを取得する
	element = document.getElementById("aaa");
	// 出力テスト
	console.log("tag:" + element.tagName + " child:" + element.hasAttributes() + " num:" + element.attributes.length);

	// エレメントを新規に作成する
	element = document.createElement("span");
	// 出力テスト
	console.log("tag:" + element.tagName + " child:" + element.hasAttributes() + " num:" + element.attributes.length);

    //-->
    </script>

  </body>
</html>

■エレメントから属性を取得する

■属性名を指定して属性値を取得する

エレメントから、属性名を指定して属性値を取得するには、getAttribute() メソッドを使用します。

引数に、属性名を指定します。

戻り値から該当する属性値が得られます。存在しない場合は null が得られます。

属性名を指定して属性値を取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="test" name="aaa" width="400" height="300">あいうえお</div>
 
    <script type="text/javascript">
    <!--
	// test という ID のエレメントを取得する
	var element = document.getElementById("test");

	// "name" という属性名の属性値を表示する
	console.log("value:" + element.getAttribute("name"));

    //-->
    </script>

  </body>
</html>

■属性名を指定して Attr オブジェクトを取得する

エレメントから、属性名を指定して Attr オブジェクトを取得するには、getAttributeNode() メソッドを使用します。

引数に、属性名を指定します。

戻り値から該当する Attr オブジェクトが得られます。存在しない場合は null が得られます。

属性名を指定して Attr オブジェクトを取得する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <div id="test" name="aaa" width="400" height="300">あいうえお</div>
 
    <script type="text/javascript">
    <!--
	// test という ID のエレメントを取得する
	var element = document.getElementById("test");
	
	// "name" という属性名の Attr オブジェクトを取得する
	var attr_obj = element.getAttributeNode("name");

	console.log("name:" + attr_obj.name + " value:" + attr_obj.value);

    //-->
    </script>

  </body>
</html>

■エレメントに属性を追加する

■属性名と属性値を指定して属性を追加する

属性名と属性値を使って、エレメントに属性を追加するには、setAttribute() メソッドを使用します。

第01引数に、属性名を指定します。

第02引数に、属性値を指定します。

属性名と属性値を使って属性を追加する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <a id="test">リンク</a>
 
    <script type="text/javascript">
    <!--
	// test という ID のエレメントを取得する
	var element = document.getElementById("test");

	// "href" という属性名と "http://hakuhin.jp" という属性値を使って属性を追加する
	element.setAttribute("href","http://hakuhin.jp");

    //-->
    </script>

  </body>
</html>

■Attr オブジェクトを使って属性を追加する

Attr オブジェクトを使って、エレメントに属性を追加するには、setAttributeNode() メソッドを使用します。

引数に、「Attr オブジェクト」を指定します。

Attr オブジェクトを使って属性を追加する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <a id="test">リンク</a>
 
    <script type="text/javascript">
    <!--
	// test という ID のエレメントを取得する
	var element = document.getElementById("test");
	
	// "href" という属性名の Attr オブジェクトを作成する
	var attr_obj = document.createAttribute("href");
	// "http://hakuhin.jp" という属性値をセット
	attr_obj.value = "http://hakuhin.jp";

	// Attr オブジェクトを使って属性を追加する
	element.setAttributeNode(attr_obj);

    //-->
    </script>

  </body>
</html>

■エレメントから属性を除外する

■属性名を指定して属性を除外する

属性名を指定して、エレメントの属性を除外するには、removeAttribute() メソッドを使用します。

引数に、属性名を指定します。

属性名を指定して属性を除外する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <a id="test" href="http://hakuhin.jp">リンク</a>
 
    <script type="text/javascript">
    <!--
	// test という ID のエレメントを取得する
	var element = document.getElementById("test");

	// "href" という属性名を使って属性を除外する
	element.removeAttribute("href");

    //-->
    </script>

  </body>
</html>

■Attr オブジェクトを指定して属性を除外する

「Attr オブジェクト」を使ってエレメントの属性を除外したい場合は、removeAttributeNode() メソッドを使用します。

以前に、「Attr オブジェクト」を使ってエレメントの属性を追加していた場合に利用できます。

引数に、属性の追加時に使用した「Attr オブジェクト」を指定します。

Attr オブジェクトを使って属性を除外する


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>タイトル</title>
  </head>

  <body>

    <a id="test">リンク</a>
 
    <script type="text/javascript">
    <!--
	// test という ID のエレメントを取得する
	var element = document.getElementById("test");
	
	// "href" という属性名の Attr オブジェクトを作成する
	var attr_obj = document.createAttribute("href");
	// "http://hakuhin.jp" という属性値をセット
	attr_obj.value = "http://hakuhin.jp";

	// Attr オブジェクトを使って属性を追加する
	element.setAttributeNode(attr_obj);

	// Attr オブジェクトを使って属性を除外する
	element.removeAttributeNode(attr_obj);

    //-->
    </script>

  </body>
</html>

上に戻る

前のページに戻る