解 説

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

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

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

Nodeプロパティ

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

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

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

ノードウォーキングで使われるプロパティ
プロパティ名 説明
firstChild 最初の子ノードを取得
lastChild 最後の子ノードを取得
perviousSibling 直前のノードを取得
nextSibling 直後のノードを取得
childNodes.length 子ノードに含まれるノード数を取得
parentNode 親ノードを取得

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

HTMLコード

JavaScriptコード

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

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

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