JavaScript プログラミング講座

 

ドキュメントオブジェクトモデル(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 内でこれらの部品1つ1つが「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 種類ありますが、主に使用するインターフェースは、「ドキュメント」「エレメント」「テキストノード」「アトリビュート」の4つです。
 
■子の管理について
 
インターフェースの種類によっては、子を保持できません
 
DocumentType、ProcessingInstruction、Comment、Text、CDATASection、Notation インターフェースは、子を保有できません。
 

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

 
ドキュメントは、文書全体を管理するための機能がまとめられています。
 
ドキュメントは、DOM ノード全体のルート(最上位)部分に相当します。
 
ドキュメントは、文書のルートに相当するエレメントを1つだけ保持しています。
 
「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 オブジェクトへは、好きなタイミングでアクセスできるとは限りません
 
<script> タグを記述した場所によっては、HTML 文書が読み込み途中であるため、DOM オブジェクトがまだ存在しないという場合があります。
 
■DOM オブジェクトが作成されるタイミングについて
 
任意の <script> タグ内が実行されている場合、
 
<script> タグより上側にある文書は、すでに読み込みが完了しており、DOM オブジェクトは作成済みです。
 
<script> タグより下側にある文書は、まだ読み込んでいないので、DOM オブジェクトは未作成です。
 
例えば、<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
 


 

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

 
 


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

 
1.タグに名前属性を追加する
 
取得したいタグに、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>
 
2.名前属性から、複数のエレメントを取得する
 
document.getElementsByName() メソッドを使用します。
 
引数に、取得したいエレメントの名前を、文字列で指定します。
 
Document.getElementsByName( "名前" ) :NodeList
第01引数 String取得したいエレメントの名前を指定。
戻り値 NodeListNodeList オブジェクトが得られる。
 
■戻り値 (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 属性からエレメントを取得する

 
1.タグに ID 属性を追加する
 
取得したいタグに、id 属性を追加して、好きな識別名を設定します。
 
重複した ID をつける事はできません。
 
ID はユニーク(唯一)である必要があります。
 
ID 属性を追加する

<div id="abc">あいうえお</div>
<span id="def">かきくけこ</span>
<div id="ghi">さしすせそ</div>
 
2.ID 属性から、1つのエレメントを取得する
 
document.getElementById() メソッドを使用します。
 
引数に、取得したいエレメントの ID 属性を、文字列で指定します。
 
Document.getElementById( "ID 属性" ) :HTMLElement
第01引数 String取得したいエレメントの ID 属性を指定。
戻り値 HTMLElement見つかった場合、エレメントが得られる。見つからなかった場合は、null が得られる。
 
■戻り値 (HTMLElement)
 
戻り値からは、マッチするエレメントが1つ得られます。
 
見つからなかった場合は、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>
 

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

 
1.タグにクラス属性を追加する
 
取得したいタグに、class 属性を追加して、好きな識別名を設定します。
 
重複したクラス名を付ける事も可能です。
 
空白文字で区切ると、複数のクラス名を指定する事ができます。
 
クラス名属性を追加する

<div class"="test">あいうえお</div>
<span class"="test test2">かきくけこ</span>
<div class"="abc">さしすせそ</div>
 
2.クラス名から、複数のエレメントを取得する
 
document.getElementsByClassName() メソッドを使用します。
 
任意のエレメントから、getElementsByClassName() メソッドを使用する事もできます。
 
この場合、検索範囲が、任意のエレメントの子孫のみに限定されます。
 
Internet Explorer 8 以前では利用できません。
 
代替関数は、こちらで解説しています。
 
(Document or Element).getElementsByClassName( "クラス名" ) :NodeList
第01引数 String取得したいエレメントのクラス名を指定。空白で区切って複数の指定が可能。(AND 条件)
戻り値 NodeListNodeList オブジェクトが得られる。
 
■第01引数 (クラス名)
 
第01引数に、取得したいエレメントのクラス名を、文字列で指定します。
 
要素は、複数のクラス名を持つ事ができます。
 
そのうちの1つでもマッチした場合、その要素は取得対象となります。
 
■第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;
}
 

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

 
1.タグを追加する
 
取得したいタグを適当に用意します。
 
タグを適当に用意する

<div>あいうえお</div>
<span>かきくけこ</span>
<div>さしすせそ</div>
 
2.タグ名(要素)から、複数のエレメントを取得する
 
document.getElementsByTagName() メソッドを使用します。
 
任意のエレメントから、getElementsByTagName() メソッドを使用する事もできます。
 
この場合、検索範囲が、任意のエレメントの子孫のみに限定されます。
 
(Document or Element).getElementsByTagName( "タグ名" ) :NodeList
第01引数 String取得したいエレメントのタグ名を指定。"*" を指定するとすべてのエレメントが得られます。
戻り値 NodeListNodeList オブジェクトが得られる。
 
■第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>
 

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

 
 

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

 
当たり判定を使ってエレメントを取得する方法は、こちらで解説しています。
 
マウスボタンを押した時に、マウス直下にあるエレメントを取得する

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

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

 
ドキュメントは、文書のルートに相当するエレメントを1つだけ保持しています。
 
「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 値が得られます。
 
1つのみ存在する場合は、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" であるエレメントを1つ取得する

<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);
			}

		// ------------------------------------------------------------
		// 該当する要素は1つである
		// ------------------------------------------------------------
		}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" であるエレメントを取得(この例では、該当する要素は1つ)
	// ------------------------------------------------------------
	var form = document["my_form"];

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

	// ------------------------------------------------------------
	// name 属性が、"my_textarea" であるエレメントを取得(この例では、該当する要素は1つ)
	// ------------------------------------------------------------
	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 オブジェクト」を取得する
 
parentNode プロパティを使用します。
 
自身が任意のノードリストに登録されていれば、親の DOM オブジェクトが取得できます。
 
大抵の場合、エレメントが得られます。
 
自身が任意のノードリストに登録されていない場合や、親が取得できない場合は、null が得られます。
 
 
■取得例
 
1つ上の親 DOM オブジェクトを取得する

<html>
  <body>

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

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

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

	// 1つ上の親の 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 プロパティを使用します。
 
子が1つも存在しない場合や、子を保有できない場合、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 プロパティを使用します。
 
子が1つも存在しない場合や、子を保有できない場合、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 インターフェース
 
エレメントから、以下のプロパティが利用可能です。
 
プロパティ名説明
firstElementChildElementノードリストの最先頭から順番に調べ、最初に見つかる要素を取得する。
lastElementChildElementノードリストの最後尾から順番に調べ、最初に見つかる要素を取得する。
previousElementSiblingElement自身から直前方向へと順番に調べ、最初に見つかる要素を取得する。
nextElementSiblingElement自身から直後方向へと順番に調べ、最初に見つかる要素を取得する。
childElementCountNumberノードリストに存在するエレメントの個数を取得する
 
ノードから、以下のプロパティが利用可能です。
 
プロパティ名説明
parentElementElement親ノードを取得する。親が要素ではない場合 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 オブジェクトを動的に作成する

 
 


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

 
■エレメントを動的に作成する
 
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 オブジェクト」はすべて除外されます
 
かわりに、新しいテキストノードを、1つだけ保有する状態になります。
 
前回とまったく同じ文字列をセットしたとしても、子は一新されます。
 
除外された 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 は、テキストノードが1つだけ作られます。(必ず)
 
innerText は、作られるDOM オブジェクトの数が1つだけとは限りません。
 
例えば、「改行入りの文字列」を展開すると、<BR> 要素も挿入されます。
 
innerText プロパティは、DOM オブジェクトが1つだけ作られるとは限らない

<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引数(略可)Booleantrue を指定した場合、子孫もすべて複製対象となります。(デフォルトは 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 オブジェクトをブラウザで表示するには?

 
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">テキストエリアA</textarea>
    <textarea id="edit_b">テキストエリアB</textarea>
    <textarea id="edit_c">テキストエリア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 オブジェクトの値にアクセスする

 
 


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

 
プロパティ 解説
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 オブジェクトを1つ以上保持しているか調べる

 
hasChildNodes() メソッドを使用します。
 
Node.hasChildNodes( ) :Boolean
第01引数 Voidなし
戻り値 Boolean子が 1 個以上存在する場合は true、それ以外は false が得られる。
 
■取得例
 
子となる DOM オブジェクトを1つ以上保持しているか調べる

<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 オブジェクトを1つ以上保持しているか調べる
	var result_a = element_a.hasChildNodes();

	// 出力テスト
	console.log(result_a); // true


	// ------------------------------------------------------------
	// ID 属性が "bbb" であるエレメントを取得する
	// ------------------------------------------------------------
	var element_b = document.getElementById("bbb");

	// 子となる DOM オブジェクトを1つ以上保持しているか調べる
	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 が得られる。
 
■取得例
 
2つの 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>
 

■2つの DOM オブジェクトが等しいか調べる


isEqualNode() メソッドを使用します。
 
Internet Explorer 8 以前では利用できません。
 
Node.isEqualNode( DOM オブジェクト ) :Boolean
第01引数 Node比較したい DOM オブジェクトを指定する。
戻り値 Boolean一致している場合 true、一致していない場合 false が得られる。
 
■比較対象について
 
評価対象となるのは、nodeName や nodeValue などの値です。
 
また、自身や子孫の DOM オブジェクトをすべて含みます。
 
■取得例
 
2つの 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
 

■2つの DOM オブジェクトのノードの位置を比較する

 
compareDocumentPosition() メソッドを使用します。
 
Internet Explorer 8 以前では利用できません。
 
Node.compareDocumentPosition( DOM オブジェクト ) :Number
第01引数 Node比較したい DOM オブジェクトを指定する。
戻り値 Number複数の情報を論理和した結果が得られる。
 
■戻り値(比較結果)
 
戻り値から、以下の定数を、論理和した値が得られます。
 
メソッドを呼び出した DOM オブジェクトを、Aとします。
 
引数で指定した DOM オブジェクトを、Bとします。
 
定数 解説
DOCUMENT_POSITION_DISCONNECTED 0x01 AとBはノードリストを通じて繋がっていない
DOCUMENT_POSITION_PRECEDING 0x02 AはBよりも、以降(next)に位置する
DOCUMENT_POSITION_FOLLOWING 0x04 AはBよりも、以前(prev)に位置する
DOCUMENT_POSITION_CONTAINS 0x08 AはBの子孫関係に位置する
DOCUMENT_POSITION_CONTAINED_BY 0x10 AはBの祖先関係に位置する
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 0x20 比較不可能なので、実装固有の結果を返している
 
■使用例
 
2つの 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");


	// ------------------------------------------------------------
	// 2つの 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("祖先である");
	}


	// ------------------------------------------------------------
	// 2つの 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>