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

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

前のページに戻る

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

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

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

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

登場初期の頃はブラウザごとに制御方法が違っていたので、ブラウザごとに専用の JavaScript のコードを用意する必要がありました。

そこで制御方法を統一するために DOM という仕様が生まれました。

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

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

プログラムから「HTML 文書」や「XML 文書」を利用するための、標準化された仕様です。

W3C により、仕様が勧告されています。

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

http://www.w3.org/TR/REC-DOM-Level-1/ (DOM Level 1)

http://www.w3.org/TR/DOM-Level-2-Core/ (DOM Level 2)

http://www.w3.org/TR/DOM-Level-3-Core/ (DOM Level 3)

http://www.w3.org/TR/dom/ (DOM4)

DOM に対応しているブラウザ（IE5.0以降など）で閲覧すれば、同じ動作が期待できます。

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

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

HTML 文書がブラウザに読み込まれると、JavaScript 内でこれらの部品１つ１つが「DOM オブジェクト」として自動的に生成されます。

「DOM オブジェクト」から、メソッドやプロパティを利用する事ができます。

■ DOM オブジェクトの基本的な機能について

「DOM オブジェクト」には、様々な種類があります。

「DOM オブジェクト」であれば、共通して利用できる基本的な機能として、Node というインターフェースが定められています。

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

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

Node インターフェースには、すべての「DOM オブジェクト」で利用できる、基本的な機能がまとまっています。

「ノードインターフェース」を使用すると、木構造の親子関係を構築することができます。

■ノードの種類について

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

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

■主に利用するインターフェースについて

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

■子の管理について

インターフェースの種類によっては、子を保持できません。

DocumentType、ProcessingInstruction、Comment、Text、CDATASection、Notation インターフェースは、子を保有できません。

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

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

ドキュメントは、DOM ノード全体のルート（最上位）部分に相当します。

ドキュメントは、文書のルートに相当するエレメントを１つだけ保持しています。

「HTML 文書」の場合は、「HTML タグ」となります。

「XML 文書」の場合は、「XML タグ」となります。

■ JavaScript から Document オブジェクトを取得する

window.document プロパティを使用します。

HTMLDocument オブジェクトを取得する


// ドキュメントオブジェクトを取得する
var doc = window.document;

// 出力テスト
alert(doc);

■その他の解説について

DOM に関する機能については、このページで解説しています。

それ以外の機能については、こちらで解説しています。

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

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

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


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

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

<img src="http://example.com/test.jpg">

■基本的なエレメントについて

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

HTMLElement インターフェースについては、こちらで解説しています。

■エレメントの種類について

タグの種類によっては、HTMLElement インターフェースから、更に派生します。

専用の機能や、メソッド、プロパティなどが追加されます。

例えば、「DIV」タグは「HTMLDivElement」となります。

例えば、「IMG」タグは「HTMLImageElement」となります。

エレメントの種類とタグ名の一覧です。(一部省略)

エレメントの種類	タグ名
HTMLAnchorElement	A
HTMLAppletElement	APPLET
HTMLAreaElement	AREA
HTMLAudioElement	AUDIO
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
HTMLVideoElement	VIDEO

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

テキストノードは、タグ以外の文字データに相当します。

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


アイウ
<span>あいうえお</span>
カキク
<div>
	かきくけこ
	<span>さしすせそ</span>たちつてと
</div>
サシス

■Text インターフェースの注意点

空白、タブ、改行などのインデント整形用の文字であっても、すべてテキストノードとなります。

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

■その他の解説について

Text インターフェースについては、こちらで解説しています。

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

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

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


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

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

<img src="http://example.com/test.jpg">

■その他の解説について

Attr インターフェースについては、こちらで解説しています。

■ノードリストについて

DOM オブジェクトには、『ノードリスト』と呼ばれる、子を保持するためのリストがあります。

『ノードリスト』に、任意の DOM オブジェクトを登録すると、子として扱われるようになります。

『ノードリスト』には、複数の DOM オブジェクトを登録することが可能です。

『ノードリスト』に登録した DOM オブジェクトは、ブラウザ画面上に表示されるようになります。

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

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

タグをネスト（入れ子）にして記述すると、親子関係を構築する事ができます。

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://example.com/test.jpg" alt="画像">
    </div>

  </body>
</html>

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

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

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

タグ以外の文字データは、テキストノードとなります。

空白、タブ、改行などのインデント整形用の文字であっても、すべてテキストノードとなります。

階層図では、"T" と省略表記しています。

■任意の「DOM オブジェクト」を取得するには？

任意のタグに識別名や ID を付けておいて、後からメソッドを使って取得する事ができます。

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

また、ルートである document から、ノードを辿って検索する事もできます。

DOM オブジェクトから親や子を取得する

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

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

DOM オブジェクトへは、好きなタイミングでアクセスできるとは限りません。

■DOM オブジェクトが作成されるタイミングについて

任意の <script> タグ内が実行されている場合、

例えば、<script> タグを、<HEAD> タグ内に記述した場合、<BODY> タグに相当するエレメントはまだ作成されておらず、ほとんどの DOM オブジェクトにアクセスすることはできません。

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

■DOM オブジェクトの構築が完了したか調べる

安全に DOM オブジェクトにアクセスするためには、DOM オブジェクトの構築が完了したか調べる必要があります。

現在のページの読み込み状況を取得する方法は、こちらで解説しています。

DOM オブジェクトの構築が完了したか調べる


// ------------------------------------------------------------
// DOM オブジェクトの構築が完了したか調べる関数
// ------------------------------------------------------------
function DocumentGetLoadedDomContent(document_obj,callback){

	if(document_obj.addEventListener){
		switch(document_obj.readyState){
		case "interactive":
		case "complete":
			callback();
			return;
		}

		document_obj.addEventListener("DOMContentLoaded" , function callee(e){
			document_obj.removeEventListener("DOMContentLoaded" , callee);
			callback();
		});

	}else if(document_obj.attachEvent){
		switch(document_obj.readyState){
		case "complete":
			callback();
			return;
		}

		var f = function (e){
			switch(document_obj.readyState){
			case "interactive":
			case "complete":
				document_obj.detachEvent("onreadystatechange" , f);
				callback();
				break;
			}
		};
		document_obj.attachEvent("onreadystatechange" , f);
	}
}


// ------------------------------------------------------------
// DOM オブジェクトの構築が完了したか調べる
// ------------------------------------------------------------
DocumentGetLoadedDomContent(document,function(){

	alert("DOM オブジェクトの構築が完了した");

});

■DOM オブジェクトの構築状況を検証する

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

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


<html>

  <head>
    <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

上に戻る

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

■セレクタにマッチするエレメントを取得する

■当たり判定とマッチするエレメントを取得する

■ルートに相当するエレメントを取得する

■ <HEAD> タグに相当するエレメントを取得する

■ <BODY> タグに相当するエレメントを取得する

■レガシーな取得方法について（HTMLCollection）

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

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

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

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

エレメントの種類によっては、name 属性は、HTML5 にて廃止されています。

<IFRAME> <FORM> 要素や、コントロール要素などで使用します。

名前属性を追加する


<form name="my_form">
  <input name="edit">
  <input name="edit">
</form>

<iframe name="my_frame0"> </iframe>
<iframe name="my_frame1"> </iframe>

２．名前属性から、複数のエレメントを取得する

document.getElementsByName() メソッドを使用します。

引数に、取得したいエレメントの名前を、文字列で指定します。

Document.getElementsByName( "名前" ) :NodeList

第01引数	String	取得したいエレメントの名前を指定。
戻り値	NodeList	NodeList オブジェクトが得られる。

■戻り値（NodeList）

マッチするエレメントが、NodeList オブジェクトに格納されています。

NodeList オブジェクトは、配列のように中身を取り出せます。

見つからなかった場合は、空の NodeList オブジェクトが得られます。

■ノードリストの変更に注意

NodeList は、Live なオブジェクトです。

DOM 操作を行うと、連動して NodeList オブジェクトの中身も変化します。

for 文などから DOM を操作を行うと、番地が変化する事があります。

■使用例

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


<html>
  <body>

    <form name="my_form">
      <input name="my_edit">
      <input name="my_edit">
    </form>

    <iframe name="my_frame0"> </iframe>
    <iframe name="my_frame1"> </iframe>

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

	// ------------------------------------------------------------
	// 指定した名前属性を持つエレメントを NodeList で取得
	// ------------------------------------------------------------
	var elements = document.getElementsByName("my_edit");

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = elements.length;
	for(i=0;i < num;i++){

		// 要素を取得
		var element = elements[i];

		// 出力テスト
		console.log(" ----- ");
		console.log("tag:"  + element.tagName);
		console.log("name:" + element.name);
		console.log("html:" + element.outerHTML);
	}

    //-->
    </script>

  </body>
</html>

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

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

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

重複した ID をつける事はできません。

ID はユニーク（唯一）である必要があります。

ID 属性を追加する


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

２．ID 属性から、１つのエレメントを取得する

document.getElementById() メソッドを使用します。

引数に、取得したいエレメントの ID 属性を、文字列で指定します。

Document.getElementById( "ID 属性" ) :HTMLElement

第01引数	String	取得したいエレメントの ID 属性を指定。
戻り値	HTMLElement	見つかった場合、エレメントが得られる。見つからなかった場合は、null が得られる。

■戻り値（HTMLElement）

戻り値からは、マッチするエレメントが１つ得られます。

見つからなかった場合は、null が得られます。

同一の ID が複数存在している場合、セレクタを使うと取得できます。

■使用例

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


<html>
  <body>

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


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

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

	if(element){
		// 出力テスト
		console.log("tag:"  + element.tagName);
		console.log("id:"   + element.id);
		console.log("html:" + element.outerHTML);
	}
    //-->
    </script>

  </body>
</html>

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

１．タグにクラス属性を追加する

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

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

空白文字で区切ると、複数のクラス名を指定する事ができます。

クラス名属性を追加する


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

２．クラス名から、複数のエレメントを取得する

document.getElementsByClassName() メソッドを使用します。

任意のエレメントから、getElementsByClassName() メソッドを使用する事もできます。

この場合、検索範囲が、任意のエレメントの子孫のみに限定されます。

Internet Explorer 8 以前では利用できません。

代替関数は、こちらで解説しています。

(Document or Element).getElementsByClassName( "クラス名" ) :NodeList

第01引数	String	取得したいエレメントのクラス名を指定。空白で区切って複数の指定が可能。(AND 条件)
戻り値	NodeList	NodeList オブジェクトが得られる。

■第01引数（クラス名）

第01引数に、取得したいエレメントのクラス名を、文字列で指定します。

要素は、複数のクラス名を持つ事ができます。

そのうちの１つでもマッチした場合、その要素は取得対象となります。

■第01引数（クラス名を複数指定した場合）

空白文字で区切って、複数のクラス名を指定する事もできます。（AND 条件）

この場合、指定したクラス名が漏れなく含まれる場合のみ、取得対象となります。

■戻り値（NodeList）

マッチするエレメントが、NodeList オブジェクトに格納されています。

NodeList オブジェクトは、配列のように中身を取り出せます。

見つからなかった場合は、空の NodeList オブジェクトが得られます。

■ノードリストの変更に注意

NodeList は、Live なオブジェクトです。

DOM 操作を行うと、連動して NodeList オブジェクトの中身も変化します。

for 文などから DOM を操作を行うと、番地が変化する事があります。

■使用例

class 属性に "test" を含むエレメントを取得する


<html>
  <body>

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


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

	// ------------------------------------------------------------
	// 指定したクラス名属性を含むエレメントを NodeList で取得
	// ------------------------------------------------------------
	var elements = document.getElementsByClassName("test");

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = elements.length;
	for(i=0;i < num;i++){

		// 要素を取得
		var element = elements[i];

		// 出力テスト
		console.log(" ----- ");
		console.log("tag:"   + element.tagName);
		console.log("class:" + element.className);
		console.log("html:"  + element.outerHTML);
	}
    //-->
    </script>

  </body>
</html>

■クラス名から、複数のエレメントを取得する関数

Internet Explorer 6 でも動作する代替関数です。

第01引数に、Document か Element オブジェクトを指定します。

第02引数に、クラス名を指定します。

戻り値から、配列が得られます。

クラス名から、複数のエレメントを取得する関数


// ------------------------------------------------------------
// クラス名から、複数のエレメントを取得する関数
// ------------------------------------------------------------
function ElementGetElementsByClassName(node,class_name){
	if(node.getElementsByClassName){
		return node.getElementsByClassName(class_name);
	}

	var node_list = new Array();
	if(!class_name) return node_list;

	var re = new RegExp("[ \t\r\n]*([^ \t\r\n]+)[ \t\r\n]*","g");

	var class_list = new Object();
	class_name.replace(re,function (m,k){ class_list[k] = true; });

	var f = function (node){
		if(node.nodeType != 1) return;

		var a = new Object();
		(node.className.baseVal === undefined ? node.className:node.className.baseVal).replace(re,function (m,k){ a[k] = true; });

		var m;
		for (var k in class_list){
			m = a[k];
			if(!m) break;
		}
		if(m) node_list.push(node);

		var nodes = node.childNodes;
		var i;
		var num = nodes.length;
		for(i=0;i < num;i++){
			f(nodes[i]);
		}
	}

	if(node.documentElement){
		node = node.documentElement;
	}

	var nodes = node.childNodes;
	var i;
	var num = nodes.length;
	for(i=0;i < num;i++){
		f(nodes[i]);
	}

	return node_list;
}

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

１．タグを追加する

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

タグを適当に用意する


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

２．タグ名（要素）から、複数のエレメントを取得する

document.getElementsByTagName() メソッドを使用します。

任意のエレメントから、getElementsByTagName() メソッドを使用する事もできます。

この場合、検索範囲が、任意のエレメントの子孫のみに限定されます。

(Document or Element).getElementsByTagName( "タグ名" ) :NodeList

第01引数	String	取得したいエレメントのタグ名を指定。"*" を指定するとすべてのエレメントが得られます。
戻り値	NodeList	NodeList オブジェクトが得られる。

■第01引数（タグ名）

第01引数に、取得したいエレメントのタグ名を、文字列で指定します。

"*" を指定する事もできます。

この場合、すべてのエレメントが得られます。

■戻り値（NodeList）

マッチするエレメントが、NodeList オブジェクトに格納されています。

NodeList オブジェクトは、配列のように中身を取り出せます。

見つからなかった場合は、空の NodeList オブジェクトが得られます。

■ノードリストの変更に注意

NodeList は、Live なオブジェクトです。

DOM 操作を行うと、連動して NodeList オブジェクトの中身も変化します。

for 文などから DOM を操作を行うと、番地が変化する事があります。

■使用例

タグ名が "div" であるエレメントを取得する


<html>
  <body>

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

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

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

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = elements.length;
	for(i=0;i < num;i++){

		// 要素を取得
		var element = elements[i];

		// 出力テスト
		console.log(" ----- ");
		console.log("tag:"  + element.tagName);
		console.log("html:" + element.outerHTML);
	}
    //-->
    </script>

  </body>
</html>

■セレクタにマッチするエレメントを取得する

セレクタ文字列を使って、エレメントを取得する事ができます。

Selectors API については、こちらで解説しています。

■当たり判定とマッチするエレメントを取得する

当たり判定を使ってエレメントを取得する方法は、こちらで解説しています。

マウスボタンを押した時に、マウス直下にあるエレメントを取得する


<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#fcc;"></div>
    <div id="bbb" style="position:absolute; left:200px; top:200px; width:200px; height:200px; background:#cfc;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:300px; width:300px; height:300px; background:#ccf;"></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// マウスボタンを押したときに実行されるイベント
	// ------------------------------------------------------------
	document.onmousedown = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// クライアント座標系を基点としたマウスカーソルの座標を取得
		// ------------------------------------------------------------
		var mouse_x = e.clientX;
		var mouse_y = e.clientY;

		// ------------------------------------------------------------
		// クライアント座標とヒットするエレメントを取得
		// ------------------------------------------------------------
		var element = document.elementFromPoint(mouse_x,mouse_y);
		if(element){
			// 出力テスト
			console.log("name:" + element.nodeName + " id:" + element.id + "(" + element + ")");
		}
	};

    //-->
    </script>

  </body>
</html>

■ルートに相当するエレメントを取得する

ドキュメントは、文書のルートに相当するエレメントを１つだけ保持しています。

「HTML 文書」の場合は、「HTML タグ」となります。

「XML 文書」の場合は、「XML タグ」となります。

■ルートとなるエレメントを取得する

document.documentElement プロパティを使用します。

HTML 文書の場合、HTMLHtmlElement オブジェクトが取得できます。

■取得例

HTMLHtmlElement オブジェクトを取得する


<html>

  <head>
    <script type="text/javascript">
    <!--
	// HTMLHtmlElement オブジェクトを取得
	var element = document.documentElement;

	// 出力テスト
	console.log("tag:" + element.tagName + " type:" + element.nodeType);

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

  <body></body>

</html>

■ <HEAD> タグに相当するエレメントを取得する

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

document.head プロパティを使用します。

InternetExplorer 8 以前では未対応です。

■ HTMLHeadElement オブジェクトを取得する関数

HTMLHeadElement オブジェクトを取得する関数です。

InternetExplorer 8 以前でも取得可能です。

HTMLHeadElement オブジェクトを取得する関数


// ------------------------------------------------------------
// HTMLHeadElement オブジェクトを取得する関数
// ------------------------------------------------------------
function DocumentGetHeadElement(document_obj){
	if(document_obj.head){
		return document_obj.head;
	}

	var nodes = document_obj.documentElement.childNodes;
	var i;
	var num = nodes.length;
	for(i=0;i < num;i++){
		if(nodes[i].tagName == "HEAD"){
			return nodes[i];
		}
	}

	return null;
}

■取得例

HTMLHeadElement オブジェクトを取得する


<html>

  <head></head>

  <body>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// HTMLHeadElement オブジェクトを取得する関数
	// ------------------------------------------------------------
	function DocumentGetHeadElement(document_obj){
		if(document_obj.head){
			return document_obj.head;
		}

		var nodes = document_obj.documentElement.childNodes;
		var i;
		var num = nodes.length;
		for(i=0;i < num;i++){
			if(nodes[i].tagName == "HEAD"){
				return nodes[i];
			}
		}

		return null;
	}


	// ------------------------------------------------------------
	// HTMLHeadElement オブジェクトを取得
	// ------------------------------------------------------------
	var element = DocumentGetHeadElement(document);

	// 出力テスト
	console.log("tag:" + element.tagName + " type:" + element.nodeType);


    //-->
    </script>

  </body>
</html>

■ <BODY> タグに相当するエレメントを取得する

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

document.body プロパティを使用します。

■ BODY 要素を取得できない場合

BODY 要素は、必ずしも取得できるとは限りません。

例えば、<HEAD> 要素内の <SCRIPT> タグ内からアクセスした場合、<BODY> 要素はまだ生成されていません。

この場合、イベントを使って、DOM ツリーの構築が完了するまで待ちます。

■取得例

HTMLBodyElement オブジェクトを取得する


<html>

  <head>
    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// この時点では、まだ HTMLBodyElement オブジェクトは生成されていないので、取得に失敗する
	// ------------------------------------------------------------
	console.log(document.body); // null

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


  <body>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// HTMLBodyElement オブジェクトを取得
	// ------------------------------------------------------------
	var element = document.body;

	// 出力テスト
	console.log("tag:" + element.tagName + " type:" + element.nodeType);

    //-->
    </script>

  </body>

</html>

■レガシーな取得方法について（HTMLCollection）

古くから存在する、非標準な仕様のようです。

id 属性や、name 属性を使って、該当する要素をまとめて取得する事ができます。

■得られるデータ型について

以下の仕様に注意してください。

得られるデータは、配列ライクなオブジェクトである可能性があります。

該当する要素が存在しない場合は、undefined 値が得られます。

１つのみ存在する場合は、HTMLElement オブジェクトが直接的に得られます。

複数存在する場合は、HTMLCollection オブジェクトが得られます。

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

配列のように中身を取り出せます。

中には、エレメントが格納されています。

■ HTMLCollection オブジェクトか判別する関数

HTMLCollection オブジェクトか判別する関数


// ------------------------------------------------------------
// HTMLCollection オブジェクトか判別する関数
// ------------------------------------------------------------
function ObjectIsHTMLCollection(obj){
	try{
		if(window.HTMLCollection){
			if(window.HTMLCollection === obj.constructor){
				return true;
			}
		}else{
			if(obj.length && obj.item && obj.namedItem){
				return true;
			}
		}
	}catch(e){
	}
	return false;
}

■ id 属性を使って要素を取得する（レガシーな方法）

Window オブジェクトに対して、id 属性名で読み取りアクセスを試みます。

大抵の場合、id はユニーク（唯一）であり、該当する要素そのものが得られます。

同じ id 属性を持つ要素が複数存在する場合、HTMLCollection オブジェクトが得られます。

ブラウザによっては、要素以外のオブジェクトが得られる場合があります。

<IFRAME> <FRAME> 要素の取得を試みた場合、フレーム内の Window オブジェクトが得られます。

確実に要素の取得を試みたい場合、getElementById() メソッドを使用します。

id 属性が "aaa" であるエレメントを１つ取得する


<html>
  <body>

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


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

	// 指定した ID 属性を持つエレメントを取得
	var element = window["aaa"];

	if(element){
		// 出力テスト
		console.log("tag:" + element.tagName + " html:" + element.innerHTML);
	}
    //-->
    </script>

  </body>
</html>

id 属性が "aaa" であるエレメントを複数取得する


<html>
  <body>

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


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

	// ------------------------------------------------------------
	// HTMLCollection オブジェクトか判別する関数
	// ------------------------------------------------------------
	function ObjectIsHTMLCollection(obj){
		if(window.HTMLCollection){
			if(window.HTMLCollection === obj.constructor){
				return true;
			}
		}else{
			if(obj.length && obj.item && obj.namedItem){
				return true;
			}
		}
	}

	// ------------------------------------------------------------
	// HTMLCollection オブジェクトの取得を試みる
	// ------------------------------------------------------------
	var html_collection = window["aaa"];

	// ------------------------------------------------------------
	// 該当する要素が存在する
	// ------------------------------------------------------------
	if(html_collection){

		// ------------------------------------------------------------
		// 該当する要素は複数である
		// ------------------------------------------------------------
		if(ObjectIsHTMLCollection(html_collection)){
			var i;
			var num = html_collection.length;
			for(i=0;i < num;i++){
				// 要素を取得する
				var element = html_collection[i];

				// 出力テスト
				console.log("tag:" + element.tagName + " html:" + element.innerHTML);
			}

		// ------------------------------------------------------------
		// 該当する要素は１つである
		// ------------------------------------------------------------
		}else{
			// 要素を取得する
			var element = html_collection;

			// 出力テスト
			console.log("tag:" + element.tagName + " html:" + element.innerHTML);
		}

	// ------------------------------------------------------------
	// 該当する要素が存在しない
	// ------------------------------------------------------------
	}else{

		console.log("該当する要素は存在しない");

	}

    //-->
    </script>

  </body>
</html>

■ name 属性を使って、要素を取得する（レガシーな方法）

Document オブジェクトに対して、name 属性名で読み取りアクセスを試みます。

この取得方法は、getElementsByName() メソッドとは違い、万能ではありません。

ブラウザによっては、取得できない要素が存在します。

FORM 要素は、主要ブラウザで取得可能です。

任意の FORM 要素に対して、name 属性名で読み取りアクセスを試みる事もできます。

この場合、検索範囲は子孫のみに限定され、コントロール要素などが取得可能です。

name 属性を使って、該当する要素を取得する


<html>
  <body>

    <form name="my_form" action="http://example.com/cgi-bin/upload.cgi" >

      <textarea name="my_textarea" >テキストエリア</textarea> <br>

      <input type="radio" name="my_radio" value="item_a" > <br>
      <input type="radio" name="my_radio" value="item_b" > <br>
      <input type="radio" name="my_radio" value="item_c" >

    </form>

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

	// ------------------------------------------------------------
	// name 属性が、"my_form" であるエレメントを取得（この例では、該当する要素は１つ）
	// ------------------------------------------------------------
	var form = document["my_form"];

	// 出力テスト
	console.log("tag:" + form.tagName + " html:" + form.innerHTML);

	// ------------------------------------------------------------
	// name 属性が、"my_textarea" であるエレメントを取得（この例では、該当する要素は１つ）
	// ------------------------------------------------------------
	var textarea = form["my_textarea"];

	// 出力テスト
	console.log("tag:" + textarea.tagName + " value:" + textarea.value);

	// ------------------------------------------------------------
	// name 属性が、"my_radio" であるエレメントを取得（この例では、該当する要素は複数）
	// ------------------------------------------------------------
	var radio_list = form["my_radio"];

	var i;
	var num = radio_list.length;
	for(i=0;i < num;i++){

			// 要素を取得する
			var radio = radio_list[i];

			// 出力テスト
			console.log("tag:" + radio.tagName + " value:" + radio.value);
	}

    //-->
    </script>

  </body>
</html>

上に戻る

DOM オブジェクトから親や子を取得する

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

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

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

■ノードリストの最先頭の DOM オブジェクト（子）を取得する

■ノードリストの最後尾の DOM オブジェクト（子）を取得する

■ノードリストのすべての DOM オブジェクト（子）を取得する

■すべての子孫 DOM オブジェクトを検索する

■エレメントのトラバーサルについて

■DOM オブジェクトから親や子を取得する

任意の DOM オブジェクトから、親や子を取得する事ができます。

ノードリストを順番に巡っていくと、祖先や子孫にアクセスする事もできます。

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

■自身の「親 DOM オブジェクト」を取得する

parentNode プロパティを使用します。

自身が任意のノードリストに登録されていれば、親の DOM オブジェクトが取得できます。

大抵の場合、エレメントが得られます。

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

■取得例

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


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// 成功例
	// ------------------------------------------------------------
	// "bbb" という ID 属性のエレメントを取得する
	var element = document.getElementById("bbb");

	// １つ上の親の DOM オブジェクトを取得する
	var parent_node = element.parentNode;

	// 出力テスト
	console.log("node:" + parent_node.nodeName + " type:" + parent_node.nodeType + " id:" + parent_node.id);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// 適当なエレメントを作成する
	var element = document.createElement("div");

	// 出力テスト（DOMに登録していないので null が得られる）
	console.log(element.parentNode);

    //-->
    </script>

  </body>
</html>

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

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

previousSibling プロパティを使用します。

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

■HTML 文書のインデント整形に注意

HTML 文書を見やすくするために、改行やタブを記述している場合、タグとタグの間にテキストノードが存在するので注意します。

タグとタグの間に、空白やタブや改行が無い場合、順序良くエレメントを取得できます。

エレメントのトラバーサルについては、こちらで解説しています。

■取得例

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


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// 成功例
	// ------------------------------------------------------------
	// "ccc" という ID 属性のエレメントを取得する
	var element = document.getElementById("ccc");

	// 直前（隣）の DOM オブジェクトを取得する
	var node_prev = element.previousSibling;

	// 出力テスト
	console.log("node:" + node_prev.nodeName + " type:" + node_prev.nodeType + " id:" + node_prev.id);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// "bbb" という ID 属性のエレメントを取得する
	var element = document.getElementById("bbb");

	// 直前（隣）の DOM オブジェクトを取得する
	var node_prev = element.previousSibling;

	// 出力テスト(ノードリストの最先頭なので存在しない)
	console.log(node_prev);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// 適当なエレメントを作成する
	var element = document.createElement("div");

	// 出力テスト（まだノードリストに登録していないので存在しない）
	console.log(element.previousSibling);

    //-->
    </script>

  </body>
</html>

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

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

nextSibling プロパティを使用します。

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

■HTML 文書のインデント整形に注意

HTML 文書を見やすくするために、改行やタブを記述している場合、タグとタグの間にテキストノードが存在するので注意します。

タグとタグの間に、空白やタブや改行が無い場合、順序良くエレメントを取得できます。

エレメントのトラバーサルについては、こちらで解説しています。

■取得例

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


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// 成功例
	// ------------------------------------------------------------
	// "bbb" という ID 属性のエレメントを取得する
	var element = document.getElementById("bbb");

	// 直後（隣）の DOM オブジェクトを取得する
	var node_next = element.nextSibling;

	// 出力テスト
	console.log("node:" + node_next.nodeName + " type:" + node_next.nodeType + " id:" + node_next.id);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// "ccc" という ID 属性のエレメントを取得する
	var element = document.getElementById("ccc");

	// 直後（隣）の DOM オブジェクトを取得する
	var node_next = element.nextSibling;

	// 出力テスト(ノードリストの最後尾なので存在しない)
	console.log(node_next);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// 適当なエレメントを作成する
	var element = document.createElement("div");

	// 出力テスト（まだノードリストに登録していないので存在しない）
	console.log(element.nextSibling);

    //-->
    </script>

  </body>
</html>

■ノードリストの最先頭の DOM オブジェクト（子）を取得する

■ノードリストの最先頭に存在する DOM オブジェクトを取得する

firstChild プロパティを使用します。

子が１つも存在しない場合や、子を保有できない場合、null が得られます。

■取得例

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


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// 成功例
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ノードリストの最先頭の DOM オブジェクト（子）を取得する
	var node_child = element.firstChild;

	// 出力テスト
	console.log("node:" + node_child.nodeName + " type:" + node_child.nodeType + " id:" + node_child.id);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// "ccc" という ID 属性のエレメントを取得する
	var element = document.getElementById("ccc");

	// ノードリストの最先頭の DOM オブジェクト（子）を取得する
	var node_child = element.firstChild;

	// 出力テスト(子が存在しない)
	console.log(node_child);

	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// 適当なエレメントを作成する
	var element = document.createElement("div");

	// 出力テスト（子が存在しない）
	console.log(element.firstChild);

    //-->
    </script>

  </body>
</html>

■ノードリストの最後尾の DOM オブジェクト（子）を取得する

■ノードリストの最後尾に存在する DOM オブジェクトを取得する

lastChild プロパティを使用します。

子が１つも存在しない場合や、子を保有できない場合、null が得られます。

■取得例

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


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// 成功例
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ノードリストの最後尾の DOM オブジェクト（子）を取得する
	var node_child = element.lastChild;

	// 出力テスト
	console.log("node:" + node_child.nodeName + " type:" + node_child.nodeType + " id:" + node_child.id);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// "ccc" という ID 属性のエレメントを取得する
	var element = document.getElementById("ccc");

	// ノードリストの最後尾の DOM オブジェクト（子）を取得する
	var node_child = element.lastChild;

	// 出力テスト(子が存在しない)
	console.log(node_child);


	// ------------------------------------------------------------
	// 失敗例
	// ------------------------------------------------------------
	// 適当なエレメントを作成する
	var element = document.createElement("div");

	// 出力テスト（子が存在しない）
	console.log(element.lastChild);

    //-->
    </script>

  </body>
</html>

■ノードリストのすべての DOM オブジェクト（子）を取得する

■ノードリストを取得する

childNodes プロパティを使用します。

NodeList オブジェクトが得られます。

NodeList オブジェクトは、配列のように中身を取り出せます。

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

子の所有に対応していない場合でも、空の NodeList オブジェクトが得られます。

■ノードリストの変更に注意

NodeList は、Live なオブジェクトです。

DOM 操作を行うと、連動して NodeList オブジェクトの中身も変化します。

for 文などからノードリストを操作すると、番地が変化する事があります。

■取得例

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


<html>
  <body>

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

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

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

	// ------------------------------------------------------------
	// すべての 子 DOM オブジェクトを取得する
	// ------------------------------------------------------------
	var child_nodes = element.childNodes;

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = child_nodes.length;
	for(i=0;i < num;i++){
		// 子 DOM オブジェクトを取得
		var child_node = child_nodes[i];

		// 出力テスト
		console.log(" ----- ");
		console.log("node:"  + child_node.nodeName);
		console.log("type:"  + child_node.nodeType);
		console.log("value:" + child_node.nodeValue);
		console.log("html:"  + child_node.outerHTML);
	}

	// ------------------------------------------------------------
	// すべての子をリムーブする（最後尾からアクセスする）
	// ------------------------------------------------------------
	var i;
	var num = child_nodes.length;
	for(i=num-1;i >= 0;i--){

		// 子 DOM オブジェクトを取得
		var child_node = child_nodes[i];

		// ノードリストから除外する
		child_node.parentNode.removeChild(child_node);
	}

    //-->
    </script>

  </body>
</html>

■すべての子孫 DOM オブジェクトを検索する

ノードを巡ると、すべての子孫にアクセスすることができます。

再帰的に子孫を検索する例です。

■DOM オブジェクトのすべての子孫を検索する関数

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

第02引数に、コールバック関数を指定します。

戻り値から、コールバック関数で返したオブジェクトが得られます。

第02引数で指定する、コールバック関数の仕様です。

第01引数から、「DOM オブジェクト」が得られます。

戻り値から、オブジェクトを返すと検索を終了します。

DOM オブジェクトのすべての子孫を検索する関数


// ------------------------------------------------------------
// DOM オブジェクトのすべての子孫を検索する関数
// ------------------------------------------------------------
function DomNodeFindAllDescendants(node,func){
	function f(n){
		var nodes = n.childNodes;
		var i;
		var num = nodes.length;
		var a = new Array();
		for(i=0;i < num;i++){ a[i] = nodes[i]; }
		for(i=0;i < num;i++){
			node = func(a[i]);
			if(node){ return node; }
			node = f(a[i]);
			if(node){ return node; }
		}
		return null;
	}
	return f(node);
}

■使用例

すべての子孫を検索する


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}


	// ------------------------------------------------------------
	// 検索例
	// ------------------------------------------------------------
	// "container" という ID 属性のエレメントを取得する
	var element = document.getElementById("container");

	// コールバック関数を使って、エレメントのすべての子孫を検索
	DomNodeFindAllDescendants(element,function (node){
		// 出力テスト
		console.log("type:" + node.nodeType + " name:" + node.nodeName + " value:" + node.nodeValue);

		// 検索を継続
		return null;
	});


	// ------------------------------------------------------------
	// 検索例
	// ------------------------------------------------------------
	// "container" という ID 属性のエレメントを取得する
	var element = document.getElementById("container");

	// コールバック関数を使って、エレメントのすべての子孫を検索
	element = DomNodeFindAllDescendants(element,function (node){
		// エレメントである
		if(node.nodeType == 1){
			// タグ名が SPAN である
			if(node.tagName.toUpperCase() == "SPAN"){
				// 検索を終了
				return node;
			}
		}

		// 検索を継続
		return null;
	});

	// 出力テスト
	console.log("type:" + element.nodeType + " name:" + element.nodeName + " value:" + element.innerHTML);

    //-->
    </script>

  </body>
</html>

■エレメントのトラバーサルについて

W3C により、仕様が勧告されています。

http://www.w3.org/TR/ElementTraversal/

Internet Explorer 8 以前では対応していません。

■エレメントのトラバーサルについて

DOM API を利用するとノードリストを順番にめぐる事ができます。

要素のみを取得したい場合、nodeType を確認する必要がありました。

また、インデント整形用のテキストノードが混入する事を、考慮する必要がありました。

ElementTraversal を利用すると、エレメントのみを順序良く取得する事ができます。

見つからない場合は、null 値が得られます。

■ElementTraversal インターフェース

エレメントから、以下のプロパティが利用可能です。

プロパティ名	型	説明
firstElementChild	Element	ノードリストの最先頭から順番に調べ、最初に見つかる要素を取得する。
lastElementChild	Element	ノードリストの最後尾から順番に調べ、最初に見つかる要素を取得する。
previousElementSibling	Element	自身から直前方向へと順番に調べ、最初に見つかる要素を取得する。
nextElementSibling	Element	自身から直後方向へと順番に調べ、最初に見つかる要素を取得する。
childElementCount	Number	ノードリストに存在するエレメントの個数を取得する

ノードから、以下のプロパティが利用可能です。

プロパティ名	型	説明
parentElement	Element	親ノードを取得する。親が要素ではない場合 null。

■エレメントトラバーサルの代替関数

Internet Explorer 6 でも動作する代替関数です。

エレメントトラバーサルの代替関数


// ------------------------------------------------------------
// 自身から直前方向へと順番に調べ、最初に見つかる要素を取得する関数
// ------------------------------------------------------------
function DomNodeGetPreviousElementSibling(node){
	node = node.previousSibling;
	while(node){
		if(node.nodeType == 1) break;
		node = node.previousSibling;
	}
	return node;
}

// ------------------------------------------------------------
// 自身から直後方向へと順番に調べ、最初に見つかる要素を取得する関数
// ------------------------------------------------------------
function DomNodeGetNextElementSibling(node){
	node = node.nextSibling;
	while(node){
		if(node.nodeType == 1) break;
		node = node.nextSibling;
	}
	return node;
}

// ------------------------------------------------------------
// ノードリストの最先頭から順番に調べ、最初に見つかる要素を取得する関数
// ------------------------------------------------------------
function DomNodeGetFirstElementChild(node){
	var nodes = node.childNodes;
	var i;
	var num = nodes.length;
	for(i=0;i < num;i++){
		if(nodes[i].nodeType == 1) return nodes[i];
	}
	return null;
}

// ------------------------------------------------------------
// ノードリストの最後尾から順番に調べ、最初に見つかる要素を取得する関数
// ------------------------------------------------------------
function DomNodeGetLastElementChild(node){
	var nodes = node.childNodes;
	var i;
	var num = nodes.length;
	for(i=num-1;i>=0;i--){
		if(nodes[i].nodeType == 1) return nodes[i];
	}
	return null;
}

上に戻る

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

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

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

■「HTML 文字列」を指定して、DOM ツリーを構築する

■「文字列」を指定して、テキストノードを構築する

■DOM オブジェクトを複製する

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

document.createElement() メソッドを使用します。

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

document.createElement( "タグ名" ) :HTMLElement

第01引数	String	作成したいタグ名を指定。
戻り値	HTMLElement	新しいエレメントが得られる。

■作成可能なエレメントの一例

引数で指定するタグ名	得られるエレメントオブジェクト
A	HTMLAnchorElement
APPLET	HTMLAppletElement
AREA	HTMLAreaElement
AUDIO	HTMLAudioElement
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
VIDEO	HTMLVideoElement
その他の文字列	HTMLElement

■作成したエレメントをブラウザに表示する

エレメントを、任意のノードリストに登録します。

■作成例

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


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

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

// BODY のノードリストに登録する
document.body.appendChild(element);

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

document.createTextNode() メソッドを使用します。

引数に、表示したい文字列を指定します。省略はできません。

後から、テキストノードの値を変更することも可能です。

document.createTextNode( "文字列" ) :Text

第01引数	String	テキストノードの値を指定。
戻り値	Text	新しいテキストノードが得られる。

■テキストノードをブラウザ画面上に表示する

テキストノードを、任意のノードリストに登録します。

■作成例

テキストノードを作成する


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

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

// BODY のノードリストに登録する
document.body.appendChild(text);

■「HTML 文字列」を指定して、DOM ツリーを構築する

エレメントの innerHTML プロパティに、「HTML 文字列」を指定します。

子孫となる DOM オブジェクトを、まとめて構築することができます。

エレメント内に、子孫となる DOM オブジェクトを、まとめて構築する


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

// HTML 文字列をセットして、子孫 DOM ツリーを構築する
element.innerHTML = "<B>あいうえお</B><I>かきくけこ</I>";

// BODY のノードリストに登録する
document.body.appendChild(element);

■ innerHTML プロパティに書き込みアクセスした場合

元々存在した「子の DOM オブジェクト」は、すべて除外されます。

セットした HTML 文字列の書式に従い、新しい DOM オブジェクトが作成され、ノードが構築されます。

前回とまったく同じ「HTML 文字列」をセットしたとしても、すべての子孫は一新されます。

除外された DOM オブジェクトは、消滅します。（参照が残っていない場合）

■セキュリティリスクについて

外部から得られる不定の文字列を、innerHTML プロパティに書き込んではいけません。

外部から悪意のあるスクリプトを実行する事ができるため危険です。

単純にテキストだけを更新したい場合は、textContent プロパティを使用します。

DOMParser クラスを使って、HTML 文字列をパースする事もできます。

■使用例

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


<html>
  <body>

    <div id="container"></div>

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

	// HTML 文字列をセットして、子孫 DOM ツリーを構築する
	element.innerHTML = "<textarea>表示テスト</textarea><input type=\"button\" value=\"ボタン\">";

    //-->
    </script>

  </body>
</html>

■ innerHTML と outerHTML の違い

innerHTML は、自身が保有する子のリストが一新されます。

outerHTML は、自身が消滅し、自身が元あった場所に割り込み挿入されます。

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


<html>
  <body>

    <div id="container">
      <span id="aaa">あああ</span>
      <span id="bbb">いいい</span>
      <span id="ccc">ううう</span>
    </div>

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

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

	// HTML 文字列をセットして、DOM ツリーを構築する（自身と引き換えに）
	element_bbb.outerHTML = '<span id="ddd">えええ</span>';

	// 出力テスト
	console.log(element_container.outerHTML);

    //-->
    </script>

  </body>
</html>

■「文字列」を指定して、テキストノードを構築する

エレメントが持つ、textContent プロパティを使用します。

■エレメントから書き込みアクセスした場合

元々存在した「子の DOM オブジェクト」はすべて除外されます。

かわりに、新しいテキストノードを、１つだけ保有する状態になります。

前回とまったく同じ文字列をセットしたとしても、子は一新されます。

除外された DOM オブジェクトは、消滅します。（参照が残っていない場合）

nodeValue プロパティを利用した方が、高速に動作します。

■テキストノードから書き込みアクセスした場合

textContent プロパティは、nodeValue プロパティと同様に動作します。

■使用例

エレメントに文字列をセットして、テキストノードを構築する


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

// エレメントに文字列をセットする
element.textContent = "あいうえお";

// BODY のノードリストに登録する
document.body.appendChild(element);

エレメントに文字列をセットして、文章を更新する


<html>
  <body>

    <div id="text">あいうえお</div>

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

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

	// エレメントに文字列をセットする
	element.textContent = "表示テスト";

    //-->
    </script>

  </body>
</html>

エレメントに文字列をセットして、テキストノードを構築する


// テキストノードを作成する
var text_node = document.createTextNode("あいうえお");

// テキストノードに文字列をセットする
text_node.nodeValue = "かきくけこ";

// テキストノードに文字列をセットする（nodeValue と同じ動作）
text_node.textContent = "さしすせそ";

// BODY のノードリストに登録する
document.body.appendChild(text_node);

■ textContent と innerText との違い

textContent は、テキストノードが１つだけ作られます。（必ず）

innerText は、作られるDOM オブジェクトの数が１つだけとは限りません。

例えば、「改行入りの文字列」を展開すると、<BR> 要素も挿入されます。

innerText プロパティは、DOM オブジェクトが１つだけ作られるとは限らない


<html>
  <body>

    <div id="text">あいうえお</div>

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

	// ------------------------------------------------------------
	// 文章を更新する
	// ------------------------------------------------------------
	// "text" という ID 属性のエレメントを取得する
	var element = document.getElementById("text");

	// エレメントに文字列をセットする
	element.innerText = "かかか\nききき\nくくく";

	// 出力テスト
	console.log(element.childNodes.length); // 5
	console.log(element.outerHTML); // <div id="text">かかか<br>ききき<br>くくく</div>

    //-->
    </script>

  </body>
</html>

■ innerText と outerText との違い

innerText は、自身が保有する子のリストが一新されます。

outerText は、自身が消滅し、自身が元あった場所に割り込み挿入されます。

outerText プロパティから DOM ツリーを構築する


<html>
  <body>

    <div id="container">
      <span id="aaa">あああ</span>
      <span id="bbb">いいい</span>
      <span id="ccc">ううう</span>
    </div>

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

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

	// テキスト文字列をセットして、DOM ツリーを構築する（自身と引き換えに）
	element_bbb.outerText = "え\nえ\nえ";

	// 出力テスト
	console.log(element_container.outerHTML);

    //-->
    </script>

  </body>
</html>

■DOM オブジェクトを複製する

cloneNode() メソッドを使用します。

複製したい DOM オブジェクトから呼び出します。

Node.cloneNode( 子孫も複製するか？ ) :Node

第01引数(略可)	Boolean	true を指定した場合、子孫もすべて複製対象となります。（デフォルトは false）
戻り値	Node	複製された、新しい DOM オブジェクトが得られる。

■使用例

エレメントを複製する


<html>
  <body>

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

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

	// エレメントを複製する
	var element_clone = element.cloneNode(true);

	// BODY のノードリストに登録する
	document.body.appendChild(element_clone);

    //-->
    </script>

  </body>
</html>

上に戻る

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

■任意の DOM オブジェクトを、自身の直前（隣）に登録する

■任意の DOM オブジェクトを、自身の直後（隣）に登録する

■任意の DOM オブジェクトを、自身のノードリストの最先頭（子）に登録する

■任意の DOM オブジェクトを、自身のノードリストの最後尾（子）に登録する

■任意の DOM オブジェクトを、置換する

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

「任意の DOM オブジェクト」を基準にして、「別の DOM オブジェクト」をノードリストに登録することができます。

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

document のノードに、任意の DOM オブジェクトを登録すると、その DOM オブジェクトはブラウザ画面上に表示されるようになります。

任意の DOM オブジェクトが、document からのノードの連結で繋がっていれば、その DOM オブジェクトはブラウザ画面上に表示されます。

document までのノードの連結が途切れていれば、その DOM オブジェクトはブラウザ画面上に表示されません。

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

「HTML 文書」がブラウザに読み込まれた際に、自動的に DOM オブジェクトが生成されます。

「HTML 文書」の書式に従い、ノードが自動的に構築されます。

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

JavaScript から、動的に DOM オブジェクトを作成することができます。

作成した DOM オブジェクトを、ブラウザ画面上に表示するには、任意のノードリストに登録する必要があります。

■自身の直前（隣）に、任意の DOM オブジェクトを登録する

insertBefore()メソッドを使用します。

自身の「親 DOM オブジェクト」から呼び出します。

親は、自身の parentNode プロパティから取得できます。

自身に親が存在しない場合、登録することはできません。

Node.insertBefore( 新しいNode , 基点Node ) :Node

第01引数	Node	新しい DOM オブジェクトを指定
第02引数	Node	基点 DOM オブジェクトを指定。null を指定した場合、最後尾の子として登録される。
戻り値	Node	第01引数で指定した DOM オブジェクトが得られる。

■「基点 DOM オブジェクト」の直前に「新しい DOM オブジェクト」を登録する関数

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

第02引数に、「登録したい DOM オブジェクト」を指定します。

成功すれば true、失敗すれば false が得られます。

「基点 DOM オブジェクト」の直前に「新しい DOM オブジェクト」を登録する関数


// ------------------------------------------------------------
// 「基点 DOM オブジェクト」の直前に「新しい DOM オブジェクト」を登録する関数
// ------------------------------------------------------------
function DomNodeInsertBefore(node_ref,node_new){
	var parent = node_ref.parentNode;
	if(!parent)	return false;

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

■使用例

テキストエリアの直前（隣）に、動的に作成したボタンを登録する


<html>
  <body>

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

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 「基点 DOM オブジェクト」の直前に「新しい DOM オブジェクト」を登録する関数
	// ------------------------------------------------------------
	function DomNodeInsertBefore(node_ref,node_new){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

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


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

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";

	// テキストエリアの直前にボタンを登録
	DomNodeInsertBefore(element_edit,element_button);

    //-->
    </script>

  </body>
</html>

■自身の直後（隣）に、任意の DOM オブジェクトを登録する

該当するメソッドはありません。

insertBefore() メソッドを使って実現します。

第02引数に、nextSibling プロパティの値を渡します。

■「基点 DOM オブジェクト」の直後に「新しい DOM オブジェクト」を登録する関数

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

第02引数に、「登録したい DOM オブジェクト」を指定します。

成功すれば true、失敗すれば false が得られます。

「基点 DOM オブジェクト」の直後に「新しい DOM オブジェクト」を登録する関数


// ------------------------------------------------------------
// 「基点 DOM オブジェクト」の直後に「新しい DOM オブジェクト」を登録する関数
// ------------------------------------------------------------
function DomNodeInsertAfter(node_ref,node_new){
	var parent = node_ref.parentNode;
	if(!parent)	return false;

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

■使用例

テキストエリアの直後（隣）に、動的に作成したボタンを登録する


<html>
  <body>

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

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 「基点 DOM オブジェクト」の直後に「新しい DOM オブジェクト」を登録する関数
	// ------------------------------------------------------------
	function DomNodeInsertAfter(node_ref,node_new){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

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


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

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";

	// テキストエリアの直後にボタンを登録
	DomNodeInsertAfter(element_edit,element_button);

    //-->
    </script>

  </body>
</html>

■自身のノードリストの最先頭（子）に、任意の DOM オブジェクトを登録する

該当するメソッドはありません。

insertBefore() メソッドを使って実現します。

第02引数に、firstChild プロパティの値を渡します。

ノードの種類によっては、子の管理に対応していません。

■「基点ノードリスト」の最先頭に「新しい DOM オブジェクト」を登録する関数

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

第02引数に、「登録したい DOM オブジェクト」を指定します。

成功すれば true、失敗すれば false が得られます。

「基点ノードリスト」の最先頭に「新しい DOM オブジェクト」を登録する関数


// ------------------------------------------------------------
// 「基点ノードリスト」の最先頭に「新しい DOM オブジェクト」を登録する関数
// ------------------------------------------------------------
function DomNodeInsertFirstChild(node_ref,node_new){
	try{
		var child = node_ref.firstChild;
		var node =  node_ref.insertBefore(node_new,child);
		return (node == node_new);
	}catch(e){
		return false;
	}
}

■使用例

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


<html>
  <body>

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

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 「基点ノードリスト」の最先頭に「新しい DOM オブジェクト」を登録する関数
	// ------------------------------------------------------------
	function DomNodeInsertFirstChild(node_ref,node_new){
		try{
			var child = node_ref.firstChild;
			var node =  node_ref.insertBefore(node_new,child);
			return (node == node_new);
		}catch(e){
			return false;
		}
	}


	// ------------------------------------------------------------
	// 登録例
	// ------------------------------------------------------------
	// "container" という ID 属性のエレメントを取得する
	var element = document.getElementById("container");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";
	
	// エレメントの子の最先頭に、ボタンを登録
	DomNodeInsertFirstChild(element,element_button);

    //-->
    </script>

  </body>
</html>

■自身のノードリストの最後尾（子）に、任意の DOM オブジェクトを登録する

appendChild() メソッドを使用します。

自身の DOM オブジェクトから呼び出します。

ノードの種類によっては、子の管理に対応していません。

Node.appendChild( 新しいNode ) :Node

第01引数	Node	新しい DOM オブジェクトを指定
戻り値	Node	第01引数で指定した DOM オブジェクトが得られる。

■「基点ノードリスト」の最後尾に「新しい DOM オブジェクト」を登録する関数

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

第02引数に、「登録したい DOM オブジェクト」を指定します。

成功すれば true、失敗すれば false が得られます。

「基点ノードリスト」の最後尾に「新しい DOM オブジェクト」を登録する関数


// ------------------------------------------------------------
// 「基点ノードリスト」の最後尾に「新しい DOM オブジェクト」を登録する関数
// ------------------------------------------------------------
function DomNodeInsertLastChild(node_ref,node_new){
	try{
		var node =  node_ref.appendChild(node_new);
		return (node == node_new);
	}catch(e){
		return false;
	}
}

■使用例

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


<html>
  <body>

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

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 「基点ノードリスト」の最後尾に「新しい DOM オブジェクト」を登録する関数
	// ------------------------------------------------------------
	function DomNodeInsertLastChild(node_ref,node_new){
		try{
			var node =  node_ref.appendChild(node_new);
			return (node == node_new);
		}catch(e){
			return false;
		}
	}


	// ------------------------------------------------------------
	// 登録例
	// ------------------------------------------------------------
	// "container" という ID 属性のエレメントを取得する
	var element = document.getElementById("container");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";
	
	// エレメントの子の最後尾に、ボタンを登録
	DomNodeInsertLastChild(element,element_button);

    //-->
    </script>

  </body>
</html>

■任意の DOM オブジェクトを置換する

replaceChild() メソッドを使用します。

「古い DOM オブジェクト」の親から呼び出します。

親が存在しない場合、置換することはできません。

置換後、「古い DOM オブジェクト」は、ノードリストから除外されます。

Node.replaceChild( 新しいNode , 古いNode ) :Node

第01引数	Node	新しい DOM オブジェクトを指定
第01引数	Node	古い DOM オブジェクトを指定
戻り値	Node	第01引数で指定した DOM オブジェクトが得られる。

■任意の DOM オブジェクトを、新しい DOM オブジェクトで置換する関数

第01引数に、「古い DOM オブジェクト」を指定します。

第02引数に、「新しい DOM オブジェクト」を指定します。

成功すれば true、失敗すれば false が得られます。

任意の DOM オブジェクトを、新しい DOM オブジェクトで置換する関数


// ------------------------------------------------------------
// 任意の DOM オブジェクトを、新しい DOM オブジェクトで置換する関数
// ------------------------------------------------------------
function DomNodeReplace(node_ref,node_new){
	var parent = node_ref.parentNode;
	if(!parent)	return false;

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

■使用例

真ん中のテキストエリアをボタンで置換する


<html>
  <body>

    <textarea id="edit_a">テキストエリアＡ</textarea>
    <textarea id="edit_b">テキストエリアＢ</textarea>
    <textarea id="edit_c">テキストエリアＣ</textarea>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 任意の DOM オブジェクトを、新しい DOM オブジェクトで置換する関数
	// ------------------------------------------------------------
	function DomNodeReplace(node_ref,node_new){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

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


	// ------------------------------------------------------------
	// 置換例
	// ------------------------------------------------------------
	// "edit_b" という ID 属性のエレメントを取得する
	var element_edit = document.getElementById("edit_b");

	// ボタンを作成
	var element_button = document.createElement("input");
	element_button.type = "button";
	element_button.value = "ボタン";

	// 真ん中のテキストエリアをボタンで置換
	DomNodeReplace(element_edit,element_button);

    //-->
    </script>

  </body>
</html>

上に戻る

DOM オブジェクトをノードリストから除外する

■任意の DOM オブジェクトをノードリストから除外する

removeChild() メソッドを使用します。

親 DOM オブジェクトから呼び出します。

親 DOM オブジェクトは、parentNode プロパティから取得できます。

除外された DOM オブジェクトと、子との接続状態は維持されます。

Node.removeChild( Node ) :Node

第01引数	Node	外したい DOM オブジェクトを指定
戻り値	Node	第01引数で指定した DOM オブジェクトが得られる。

■任意の DOM オブジェクトをノードリストから除外する関数

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

成功すれば true、失敗すれば false が得られます。

任意の DOM オブジェクトをノードリストから除外する関数


// ------------------------------------------------------------
// 任意の DOM オブジェクトをノードリストから除外する関数
// ------------------------------------------------------------
function DomNodeRemove(node_ref){
	var parent = node_ref.parentNode;
	if(!parent)	return false;

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

■使用例

エレメントを除去する


<html>
  <body>

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

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 任意の DOM オブジェクトをノードリストから除外する関数
	// ------------------------------------------------------------
	function DomNodeRemove(node_ref){
		var parent = node_ref.parentNode;
		if(!parent)	return false;

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


	// ------------------------------------------------------------
	// 除去例
	// ------------------------------------------------------------
	// "container" という ID 属性のエレメントを取得する
	var element = document.getElementById("container");

	// ノードリストから除外する
	DomNodeRemove(element);

    //-->
    </script>

  </body>
</html>

上に戻る

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

■エレメントの内容を、「HTML 文字列」として取得する

■エレメントの内容を、「テキスト文字列」として取得する

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

■エレメントの値と関係するプロパティ一覧

プロパティ	型	解説
outerHTML	String	エレメントの内容を、「HTML 文字列」として取得する。(自身を含む)
innerHTML	String	エレメントの内容を、「HTML 文字列」として取得する。(自身を含まない)
textContent	String	エレメント内の「すべての内容」を「テキスト文字列」として取得する。
innerText	String	エレメント内の「可視表示部分のみ」を「テキスト文字列」として取得する。

■エレメントの内容を、「HTML 文字列」として取得する

現在の DOM ツリーの状態を、「HTML 文字列」として、まとめて取得する事ができます。

エレメント自身を含める場合、outerHTML プロパティを使用します。

エレメント自身を含まない場合、innerHTML プロパティを使用します。

エレメントの内容を「HTML 文字列」として取得する


<html>
  <body>

    <div id="container"><textarea>表示テスト</textarea><input type="button" value="ボタン"></div>

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

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

	// エレメントの内容を、HTML 文字列として取得
	var html_text = element.innerHTML;

	// 出力テスト
	console.log(html_text); // '<textarea>表示テスト</textarea><input type="button" value="ボタン">'

    //-->
    </script>

  </body>
</html>

■「HTML 文字列」を指定して、DOM ツリーを構築する

innerHTML プロパティに書き込む場合については、こちらで解説しています。

■エレメントの内容を、「テキスト文字列」として取得する

すべてのテキスト部分を取得する場合、textContent プロパティを使用します。

可視表示部分にのみ限定する場合、innerText プロパティを使用します。

タグ部分は、結果に含まれません。

■使用例

エレメントの内容を文字列として取得する


<html>
  <body>

    <div id="text"><B>あいうえお</B><I>かきくけこ</I></div>

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

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

	// エレメントの内容を文字列として取得する
	var str = element.textContent;

	// 出力テスト
	console.log(str); // 'あいうえおかきくけこ'

    //-->
    </script>

  </body>
</html>

■「文字列」を指定して、テキストノードを構築する

textContent プロパティに書き込む場合については、こちらで解説しています。

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

■テキストノードの値を変更する

nodeValue プロパティを使用します。

テキストのみを更新したい場合、このプロパティは最適です。

textContent プロパティよりも高速に動作します。

■使用例

テキストノードの値を変更する


<html>
  <body>

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

	// テキストノードに文字列をセットする
	text.nodeValue = "表示テスト";

	// BODY のノードリストに登録する
	document.body.appendChild(text);

    //-->
    </script>

  </body>
</html>

上に戻る

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

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

■属性をまとめて取得する

■エレメントから属性にアクセスする

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

■「DOM オブジェクト」に属性が存在するか調べる

hasAttributes() メソッドを使用します。

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

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

エレメントであれば、属性を管理することができます。

■使用例

属性が存在するか調べる


<html>
  <body>

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

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

	// 出力テスト
	console.log("tag:" + element.tagName + " child:" + element.hasAttributes());


	// ------------------------------------------------------------
	// エレメントを新規に作成する
	// ------------------------------------------------------------
	var element = document.createElement("span");

	// 出力テスト
	console.log("tag:" + element.tagName + " child:" + element.hasAttributes());

    //-->
    </script>

  </body>
</html>

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

■「DOM オブジェクト」が持つ属性をすべて取得する

attributes プロパティを使用します。

NamedNodeMap オブジェクトが得られます。

属性を保有できない DOM オブジェクトの場合は、null が得られます。

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

NamedNodeMap オブジェクトは、配列のように中身を取り出せます。

NamedNodeMap オブジェクトの中には、「Attr オブジェクト」が格納されています。

アトリビュートについては、こちらで解説しています。

■使用例

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


<html>
  <body>

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

	// NamedNodeMap オブジェクトを取得する
	var attributes = element.attributes;
	if(attributes){

		// 属性をすべて取得する
		var i;
		var num = attributes.length;
		for(i=0;i < num;i++){
			var attribute = attributes[i];
			console.log("name:" + attribute.name + " value:" + attribute.value);
		}
	}

    //-->
    </script>

  </body>
</html>

■エレメントから属性にアクセスする

■エレメントからアトリビュートにアクセスする

こちらで解説しています。

■使用例

アトリビュートをエレメントに登録する


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


// ------------------------------------------------------------
// アトリビュートを作成する
// ------------------------------------------------------------
// 「Attr オブジェクト」を作成する
var attribute = document.createAttribute("my_attr");

// 属性値を設定する
attribute.value = "my_value";


// ------------------------------------------------------------
// エレメントにアトリビュートを登録する
// ------------------------------------------------------------
// エレメントに「Attr オブジェクト」を登録する
element.setAttributeNode(attribute);

// 「属性名」を指定して、「Attr オブジェクト」を取得する
var attribute = element.getAttributeNode("my_attr");

// エレメントから「Attr オブジェクト」を除外する
element.removeAttributeNode(attribute);

上に戻る

DOM オブジェクトを評価する

■子となる DOM オブジェクトを１つ以上保持しているか調べる

■任意の DOM オブジェクトが、自身の子孫関係にあるか調べる

■２つの DOM オブジェクトが等しいか調べる

■２つの DOM オブジェクトのノードの位置を比較する

■エレメントがセレクタとマッチするか調べる

■子となる DOM オブジェクトを１つ以上保持しているか調べる

hasChildNodes() メソッドを使用します。

Node.hasChildNodes( ) :Boolean

第01引数	Void	なし
戻り値	Boolean	子が 1 個以上存在する場合は true、それ以外は false が得られる。

■取得例

子となる DOM オブジェクトを１つ以上保持しているか調べる


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// ID 属性が "aaa" であるエレメントを取得する
	// ------------------------------------------------------------
	var element_a = document.getElementById("aaa");

	// 子となる DOM オブジェクトを１つ以上保持しているか調べる
	var result_a = element_a.hasChildNodes();

	// 出力テスト
	console.log(result_a); // true


	// ------------------------------------------------------------
	// ID 属性が "bbb" であるエレメントを取得する
	// ------------------------------------------------------------
	var element_b = document.getElementById("bbb");

	// 子となる DOM オブジェクトを１つ以上保持しているか調べる
	var result_b = element_b.hasChildNodes();

	// 出力テスト
	console.log(result_b); // false

    //-->
    </script>

  </body>
</html>

■任意の DOM オブジェクトが、自身の子孫関係にあるか調べる

contains() メソッドを使用します。

Node.contains( DOM オブジェクト ) :Boolean

第01引数	Node	比較したい DOM オブジェクトを指定する。
戻り値	Boolean	第01引数で指定した DOM オブジェクトが、子孫関係にある場合 true が得られる。

■取得例

２つの DOM オブジェクトの親子関係を調べる


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// ID 属性が "aaa" であるエレメントを取得する
	// ------------------------------------------------------------
	var element_a = document.getElementById("aaa");

	// ------------------------------------------------------------
	// ID 属性が "bbb" であるエレメントを取得する
	// ------------------------------------------------------------
	var element_b = document.getElementById("bbb");

	// ------------------------------------------------------------
	// 引数で指定した DOM オブジェクトが、子孫関係にあるか調べる
	// ------------------------------------------------------------
	var result = element_a.contains(element_b);

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log(result); // true

    //-->
    </script>

  </body>
</html>

■２つの DOM オブジェクトが等しいか調べる

isEqualNode() メソッドを使用します。

Internet Explorer 8 以前では利用できません。

Node.isEqualNode( DOM オブジェクト ) :Boolean

第01引数	Node	比較したい DOM オブジェクトを指定する。
戻り値	Boolean	一致している場合 true、一致していない場合 false が得られる。

■比較対象について

評価対象となるのは、nodeName や nodeValue などの値です。

また、自身や子孫の DOM オブジェクトをすべて含みます。

■取得例

２つの DOM オブジェクトが一致するか調べる


// ------------------------------------------------------------
// 適当なエレメントを作成する
// ------------------------------------------------------------
var element_a = document.createElement("div");

// ------------------------------------------------------------
// エレメントを複製する
// ------------------------------------------------------------
var element_b = element_a.cloneNode(true);

// ------------------------------------------------------------
// 一致するか調べる
// ------------------------------------------------------------
var result = element_a.isEqualNode(element_b);

// 出力テスト
console.log(result); // true

■２つの DOM オブジェクトのノードの位置を比較する

compareDocumentPosition() メソッドを使用します。

Internet Explorer 8 以前では利用できません。

Node.compareDocumentPosition( DOM オブジェクト ) :Number

第01引数	Node	比較したい DOM オブジェクトを指定する。
戻り値	Number	複数の情報を論理和した結果が得られる。

■戻り値（比較結果）

戻り値から、以下の定数を、論理和した値が得られます。

メソッドを呼び出した DOM オブジェクトを、Ａとします。

引数で指定した DOM オブジェクトを、Ｂとします。

定数	値	解説
DOCUMENT_POSITION_DISCONNECTED	0x01	ＡとＢはノードリストを通じて繋がっていない
DOCUMENT_POSITION_PRECEDING	0x02	ＡはＢよりも、以降(next)に位置する
DOCUMENT_POSITION_FOLLOWING	0x04	ＡはＢよりも、以前(prev)に位置する
DOCUMENT_POSITION_CONTAINS	0x08	ＡはＢの子孫関係に位置する
DOCUMENT_POSITION_CONTAINED_BY	0x10	ＡはＢの祖先関係に位置する
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	0x20	比較不可能なので、実装固有の結果を返している

■使用例

２つの DOM オブジェクトのノードの位置を比較する


<html>
  <body>

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

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

	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	// ID 属性が "aaa" であるエレメントを取得する
	var element_a = document.getElementById("aaa");

	// ID 属性が "bbb" であるエレメントを取得する
	var element_b = document.getElementById("bbb");

	// ID 属性が "ccc" であるエレメントを取得する
	var element_c = document.getElementById("ccc");


	// ------------------------------------------------------------
	// ２つの DOM オブジェクトのノードの位置を比較する
	// ------------------------------------------------------------
	var doc_pos = element_a.compareDocumentPosition(element_b);

	// 出力テスト
	console.log(doc_pos.toString(2)); // 010100

	// ------------------------------------------------------------
	// 親子関係の比較
	// ------------------------------------------------------------
	if(doc_pos & document.DOCUMENT_POSITION_CONTAINS){
		console.log("子孫である");
	}
	if(doc_pos & document.DOCUMENT_POSITION_CONTAINED_BY){
		console.log("祖先である");
	}


	// ------------------------------------------------------------
	// ２つの DOM オブジェクトのノードの位置を比較する
	// ------------------------------------------------------------
	var doc_pos = element_b.compareDocumentPosition(element_c);

	// 出力テスト
	console.log(doc_pos.toString(2)); // 000100

	// ------------------------------------------------------------
	// 前後関係の比較
	// ------------------------------------------------------------
	if(doc_pos & document.DOCUMENT_POSITION_PRECEDING){
		console.log("以降である");
	}
	if(doc_pos & document.DOCUMENT_POSITION_FOLLOWING){
		console.log("以前である");
	}

    //-->
    </script>

  </body>
</html>

上に戻る

前のページに戻る

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

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

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

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

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

■ DOM オブジェクトの基本的な機能について

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

■ノードの種類について

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

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

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

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

■ノードリストについて

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

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

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

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

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

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

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

■セレクタにマッチするエレメントを取得する

■当たり判定とマッチするエレメントを取得する

■ルートに相当するエレメントを取得する

■ <HEAD> タグに相当するエレメントを取得する

■ <BODY> タグに相当するエレメントを取得する

■レガシーな取得方法について（HTMLCollection）

DOM オブジェクトから親や子を取得する

■DOM オブジェクトから親や子を取得する

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

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

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

■ノードリストの最先頭の DOM オブジェクト（子）を取得する

■ノードリストの最後尾の DOM オブジェクト（子）を取得する

■ノードリストのすべての DOM オブジェクト（子）を取得する

■すべての 子孫 DOM オブジェクトを検索する

■エレメントのトラバーサルについて

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

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

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

■「HTML 文字列」を指定して、DOM ツリーを構築する

■「文字列」を指定して、テキストノードを構築する

■DOM オブジェクトを複製する

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

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

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

■自身の直前（隣）に、任意の DOM オブジェクトを登録する

■自身の直後（隣）に、任意の DOM オブジェクトを登録する

■自身のノードリストの最先頭（子）に、任意の DOM オブジェクトを登録する

■自身のノードリストの最後尾（子）に、任意の DOM オブジェクトを登録する

■任意の DOM オブジェクトを置換する

DOM オブジェクトをノードリストから除外する

■任意の DOM オブジェクトをノードリストから除外する

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

■エレメントの値と関係するプロパティ一覧

■エレメントの内容を、「HTML 文字列」として取得する

■エレメントの内容を、「テキスト文字列」として取得する

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

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

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

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

■エレメントから属性にアクセスする

DOM オブジェクトを評価する

■子となる DOM オブジェクトを１つ以上保持しているか調べる

■任意の DOM オブジェクトが、自身の子孫関係にあるか調べる

■２つの DOM オブジェクトが等しいか調べる

■２つの DOM オブジェクトのノードの位置を比較する

■すべての子孫 DOM オブジェクトを検索する