JavaScript プログラミング講座


ノードについて（Node）



・ノードについて
・ノードのプロパティについて
・ノードのメソッドについて

前のページに戻る

　

ノードについて

　


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

　
DOM オブジェクトであれば、共通して利用できる基本的な機能として、Node というインターフェースが定められています。
　
DOM オブジェクトについては、こちらで解説しています。
　
■ Node インターフェースの派生について
　
Node インターフェースは、以下の様に派生しています。
　
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
　
Object
↓派生
EventTarget
↓派生
Node
　

上に戻る

　

DOM オブジェクトのプロパティについて

　


■Node インターフェースのプロパティ一覧

　
Node インターフェースで利用可能な、プロパティの一覧です。
　
■ DOM Level 1
　
プロパティ名型説明
nodeTypeNumberノードのタイプを取得する
nodeNameStringノード名を取得する
nodeValueStringノードの値を設定する
parentNodeNode親ノードを取得する
childNodesNodeListノードリストのすべての DOM オブジェクト（子）を取得する
firstChildNodeノードリストの最先頭の DOM オブジェクト（子）を取得する
lastChildNodeノードリストの最後尾の DOM オブジェクト（子）を取得する
previousSiblingNode直前の DOM オブジェクト（隣）を取得する
nextSiblingNode直後の DOM オブジェクト（隣）を取得する
attributesNamedNodeMap属性をまとめて取得する
　
■ DOM Level 2
　
プロパティ名型説明
ownerDocumentDocumentルートとなる Document オブジェクトを取得する
namespaceURIString名前空間 URI を取得する
prefixString名前空間接頭辞を取得する
localNameStringローカル名を取得する
　
■ DOM Level 3
　
プロパティ名型説明
baseURIString相対パスの基点となる URI を取得する。
textContentStringノードの内容を文字列として設定する
　
■ DOM4
　
プロパティ名型説明
parentElementElement親ノードを取得する。親が要素ではない場合 null。
　

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


DOM オブジェクトのタイプを調べるには、nodeType プロパティを使用します。
　
このプロパティは、読み取り専用です。
　
以下の数値が得られます。
　
Internet Explorer 8 以前では、定数は定義されていません。
　
番号 定数 解説
1 ELEMENT_NODE エレメントノード、要素に相当
2 ATTRIBUTE_NODE アトリビュートノード、属性に相当
3 TEXT_NODE テキストノード、タグ以外の文字データに相当
4 CDATA_SECTION_NODE CDATA セクションノード
5 ENTITY_REFERENCE_NODE エンティティリファレンスノード
6 ENTITY_NODE エンティティノード
7 PROCESSING_INSTRUCTION_NODE 処理命令ノード
8 COMMENT_NODE コメントノード
9 DOCUMENT_NODE ドキュメントノード、階層のルートに相当
10 DOCUMENT_TYPE_NODE ドキュメントタイプノード
11 DOCUMENT_FRAGMENT_NODE ドキュメントフラグメントノード
12 NOTATION_NODE ノーテーションノード
　
■取得例
　
document から、すべての子孫 DOM オブジェクトのタイプを調べる

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>タイトル</title>

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

  <body>

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

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// 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);
	}

	// ------------------------------------------------------------
	// DOM オブジェクトから階層のパスを調べる関数
	// ------------------------------------------------------------
	function DomNodeNodeGetPath(node){
		var str = node.nodeName;

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

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

		return str;
	}

	// ------------------------------------------------------------
	// コールバック関数を使って、document のすべての子孫を検索
	// ------------------------------------------------------------
	DomNodeFindAllDescendants(document,function (node){

		var str = "";

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

		// ノードの種類
		var names = [
			"",
			"ELEMENT_NODE",
			"ATTRIBUTE_NODE",
			"TEXT_NODE",
			"CDATA_SECTION_NODE",
			"ENTITY_REFERENCE_NODE",
			"ENTITY_NODE",
			"PROCESSING_INSTRUCTION_NODE",
			"COMMENT_NODE",
			"DOCUMENT_NODE",
			"DOCUMENT_TYPE_NODE",
			"DOCUMENT_FRAGMENT_NODE",
			"NOTATION_NODE"
		];
		str += "タイプ:" + names[node.nodeType] + "(" + node.nodeType + ")";

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

		// 検索を継続（任意のオブジェクトを返すと終了）
		return null;
	});

    //-->
    </script>

  </body>
</html>
　

■ノード名を調べる


DOM オブジェクトの名前を取得するには、nodeName プロパティを使用します。
　
このプロパティは、読み取り専用です。
　
ノードの種類によって、得られる文字列が変化します。
　
ノードの種類 得られる文字列
ELEMENT_NODE タグ名
ATTRIBUTE_NODE アトリビュート（属性）の名前
ENTITY_REFERENCE_NODE エンティティリファレンスノードの名前
ENTITY_NODE エンティティ名
PROCESSING_INSTRUCTION_NODE 処理命令の名前
DOCUMENT_TYPE_NODE ドキュメントタイプ名
NOTATION_NODE ノーテーション名
　
■文字列定数が得られる場合
　
以下のノードは、文字列定数が得られます。
　
ノードの種類 得られる文字列
TEXT_NODE "#text"
CDATA_SECTION_NODE "#cdata-section"
COMMENT_NODE "#comment"
DOCUMENT_NODE "#document"
DOCUMENT_FRAGMENT_NODE "#document-fragment"
　
■取得例
　
document から、すべての子孫 DOM オブジェクトのノード名を調べる

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>タイトル</title>
  </head>

  <body>

    <div>あいう</div>
    <div>えおか</div>
    <div>
      <span>こさし</span>
      <span>すせそ</span>
    </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);
	}

	// ------------------------------------------------------------
	// DOM オブジェクトから階層のパスを調べる関数
	// ------------------------------------------------------------
	function DomNodeNodeGetPath(node){
		var str = node.nodeName;

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

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

		return str;
	}

	// ------------------------------------------------------------
	// コールバック関数を使って、document のすべての子孫を検索
	// ------------------------------------------------------------
	DomNodeFindAllDescendants(document,function (node){

		var str = "";

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

		// ノードの種類
		var names = [
			"",
			"ELEMENT_NODE",
			"ATTRIBUTE_NODE",
			"TEXT_NODE",
			"CDATA_SECTION_NODE",
			"ENTITY_REFERENCE_NODE",
			"ENTITY_NODE",
			"PROCESSING_INSTRUCTION_NODE",
			"COMMENT_NODE",
			"DOCUMENT_NODE",
			"DOCUMENT_TYPE_NODE",
			"DOCUMENT_FRAGMENT_NODE",
			"NOTATION_NODE"
		];
		str += "タイプ:" + names[node.nodeType] + "(" + node.nodeType + ") ";

		// ノード名
		str += "ノード名:" + node.nodeName;

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

		// 検索を継続（任意のオブジェクトを返すと終了）
		return null;
	});

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

ノードのメソッドについて

　


■ノードのメソッド一覧

　
Node インターフェースで利用可能な、メソッドの一覧です。（一部抜粋）
　
メソッド名 説明
insertBefore() 任意の DOM オブジェクトを、自身の直前（隣）に登録する
appendChild() 任意の DOM オブジェクトを、自身のノードリストの最後尾（子）に登録する
removeChild() 任意の DOM オブジェクトを、自身のノードリストから除外する
replaceChild() 任意の DOM オブジェクトを、置換する
cloneNode() 任意の DOM オブジェクトを、複製する
normalize() 連続するテキストノードを１つに統合する
　
メソッド名 説明
hasChildNodes() 子となる DOM オブジェクトを１つ以上保持しているか調べる
contains() 任意の DOM オブジェクトが、自身の子孫関係にあるか調べる
isEqualNode() ２つの DOM オブジェクトが等しいか調べる
compareDocumentPosition() ２つの DOM オブジェクトのノードの位置を比較する
　
メソッド名 説明
lookupPrefix() 名前空間 URI を指定して、プレフィックスを取得する
lookupNamespaceURI() プレフィックスを指定して、名前空間 URI を取得する
isDefaultNamespace() 名前空間 URI を指定して、デフォルトの名前空間であるか調べる
　

上に戻る

　
前のページに戻る