JavaScript 入門 | ドキュメントオブジェクトモデル | ノードへのアクセス

ノードへのアクセス

HTML 文書で HTML DOM ノードへアクセスする方法は次のとおりである。

getElementsByTagName() メソッドを利用する方法
ノード間の関係を利用してアクセスする方法

getElementsByTagName() メソッドを利用する方法

getElementsByTagName() メソッドは、特定のタグ名を持つすべての要素をノードリストの形で返す。
したがって、このメソッドが返すノードリストを利用すると、目的のノードへアクセスできる。

HTML DOM でノード間の関係は、次のようなプロパティで定義される。

parentNode: 親ノード
childNodes: 子ノードリスト
firstChild: 最初の子ノード
lastChild: 最後の子ノード
nextSibling: 次の兄弟ノード
previousSibling: 前の兄弟ノード

上記のようなプロパティを利用すると、目的のノードへ簡単にアクセスできる。

ノードに関する情報

ノードに関する情報は、次のようなプロパティを通じてアクセスできる。

nodeName
nodeValue
nodeType

これらのプロパティは、特別な別のインターフェースを利用しなくても、そのノードの情報へ直接アクセスする方法を提供する。

nodeName

nodeName プロパティはノード固有の名前を保存するため、変更できない読み取り専用プロパティである。

要素ノードの nodeName プロパティは、常にその HTML 要素のタグ名を大文字で保存する。

ノード	プロパティ値
文書ノード	#document
要素ノード	タグ名 (英字の大文字)
属性ノード	属性名
テキストノード	#text

// HTML 文書のすべての子ノードのうち、2番目のノードの名前を選択する。
document.getElementById("document").innerHTML = document.childNodes[1].nodeName;           // HTML

// html ノードのすべての子ノードのうち、最初のノードの名前を選択する。
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName; // HEAD

上の例で、HTML 文書の最初の子ノードは <!DOCTYPE html> であり、2番目の子ノードは <html> である。また、<html> ノードの最初の子ノードは <head> であり、3番目の子ノードは <body> である。

nodeValue

nodeValue プロパティはノードの値を保存する。

ノード	プロパティ値
要素ノード	undefined
属性ノード	その属性の属性値
テキストノード	そのテキスト文字列

// id が "heading" の要素の最初の子ノードのノード値を選択する。
var headingText = document.getElementById("heading").firstChild.nodeValue;

document.getElementById("text1").innerHTML = headingText;
document.getElementById("text1").firstChild.nodeValue = headingText;

これまでは innerHTML プロパティを使用して、HTML 要素の内容へ簡単にアクセスしたり、内容を変更したりできた。
この innerHTML プロパティの代わりに firstChild.nodeValue を使用しても、同じ結果を得ることができる。

nodeType

nodeType プロパティはノード固有の型を保存するため、変更できない読み取り専用プロパティである。

代表的な HTML ノード別の nodeType プロパティ値は次のとおりである。

ノード	プロパティ値
要素ノード	1
属性ノード	2
テキストノード	3
コメントノード	8
文書ノード	9

// id が "heading" の要素の最初の子ノードの型を選択する。
var headingType = document.getElementById("heading").firstChild.nodeType;

document.getElementById("head").innerHTML = headingType;           // 3
document.getElementById("document").innerHTML = document.nodeType; // 9

空のテキストノードの処理

現在、ほとんどの主要 Web ブラウザーは W3C DOM モデルをサポートしているが、処理方式には多少の違いがある。
その中でももっとも大きな違いは、空白と改行を処理する方式である。

Firefox やその他のブラウザーは、空白や改行をテキストノードとして扱う。
しかし、Internet Explorer は空白や改行をテキストノードとして扱わない。

したがって、子ノードや兄弟ノードを利用して目的のノードへアクセスしようとすると、ブラウザー間で違いが発生する。
この違いをなくすもっとも簡単な方法は、nodeType プロパティを使用して選択された要素の型を検査することである。

var lastNode;
function findLastChild(parentNode) {
    lastNode = parentNode.lastChild;
    while (lastNode.nodeType != 1) {
        lastNode = lastNode.previousSibling;
    }
}
function printLastChild() {
    var parentNode = document.getElementById("parentNode");
    findLastChild(parentNode);
    document.getElementById("nodename").innerHTML = lastNode.nodeName;
}

上の例では、最後の子ノードを見つけた後、見つけたノードの型が要素ノードでなければ、その前のノードを再び検査する。
この方式を使用すると、すべてのブラウザーで最後の子ノードとして同じ要素ノードを選択できる。