DOMを使ってノードを取得する〜DOMの活用（2）

相対的な位置関係でノードを取得

あるノードを起点に、ツリーをたどることで目的のノードを取得することができます。
その方法としては、DOMのNodeインターフェイスに定義されてる プロパティを活用します。

Node インタフェイスとは、DOM に用意されているオブジェクトです。javaなどのオブジェクト指向プログラミングでいうクラスのようなものです。オブジェクトですからプロパティやメソッドが用意されているわけです。

Nodeプロパティ

• attributes
• childNodes
• firstChild
• lastChild
• localName
• namespaceURI
• nextSibling
• nodeName
• nodeType
• nodeValue
• ownerDocument
• parentNode
• prefix

プロパティの個別の説明は詳細を説明しているサイトを参考にしてください。Interface Node

よく使用されるプロパティには次のものがあります。

ノードウォーキングの例
ボタンをクリックすると、カレント要素のid=”food”を起点にしてその子要素を全て調べてアラートに表示します。

HTMLコード

<ul id="food">
	<li>バナナ</li>

	<li>りんご</li>

	<li>みかん</li>

	<li>パイナップル</li>

</ul>
<p><button onClick="btn_onclick()">Click</button></p>

JavaScriptコード

function btn_onclick() {
	var result = [];
	var current = document.getElementById('food');
	var lis = current.childNodes;
	for(var i = 0; i < lis.length; i++) {
		var li = lis.item(i);
		if(li.nodeType == 1) {
			result.push(lis.item(i).innerHTML);
		}
	}
	window.alert(result.join(','));
}

innerHTMLは現在の要素の内容を取得設定するプロパティです。
このプロパティは実際には W3C DOM 仕様の一部ではありませんが、要素の内容を簡単に置き換える方法としてよく使用されるものです。
主要なブラウザにも対応しています。

JavaScriptの仕組みはbtn_onclick()がイベントハンドラです。これが発火点となって関数が実行されます。
getElementByIdでカレントになるノードを決めます。このサンプルでは id=”food”　のul要素がカレントになります。
ここを起点にしてchildNodesプロパティを使用してノードウォーキングを行います。

大事なポイントとしてタグの間にある改行や空白もテキストノードとみなされる点です。取り出したノードが本当に要素ノードであるか確認をif文で行います。nodeTypはノードの種類を判定するプロパティです。
要素ノードの返り値は「1」です。
nodeTypeの参考はこちら