JavaScript での DOM による (X)HTML 操作

親ノードの取得

Attr ノード、Document ノード、DocumentFragment ノード、Entity ノード、Notation ノードを除き、全てのノードは親ノードを持っています。 例えば、原則として HTML には html 要素と body 要素がありますが、body 要素の親ノードは html 要素です。 また、html 要素はルート要素 (root element) であり、その親ノードは Document ノードです。

DOM では、 Node インターフェイス (あらゆるノードはこれを実装している) の 読み取り専用属性 parentNode に、自分の親ノードが入っています。

// body 要素を取得
var bodyElem = document.getElementsByTagName("body").item(0);
// body 要素の親ノード (つまり html 要素) を取得
var node = bodyElem.parentNode;

親ノードを所有していない場合、parentNode プロパティは null です。 最初に述べたように、Attr ノード、Document ノード、DocumentFragment ノード、Entity ノード、Notation ノードは親ノードを持っていませんし、また、新たに生成し、まだノード木に追加していないノードも親はありません。

子ノードの取得

次に、自分の下にくっついているノード (子ノード) を取得する方法を説明します。 親ノードは必ず 1 つしかありませんが、子ノードは複数個持っている可能性があります。

自分の子ノードの一覧を取得するには Node インターフェイス の 読み取り専用属性 childNodes を使います。 このとき得られるのは NodeList オブジェクトです。 document.getElementsByTagName メソッドで得られるのも NodeList オブジェクトだったことを考えれば、同じように扱うことができます。 ただし、今回の場合は element オブジェクト以外のもの (Text ノードなど) も入っている可能性があることを考慮しなければいけません。 なお、子ノードが無い場合、childNodes プロパティは長さ 0 の NodeList オブジェクトです。

// body 要素を取得
var bodyElem = document.getElementsByTagName("body").item(0);
// body 要素の子ノード一覧を取得
var nodes = bodyElem.childNodes;

// nodes は NodeList 型なので, 配列のように扱うことができる
for( var i = 0; i < nodes.length; i++ ) {
    // nodes[i] は element 型とは限らない
    var node = nodes[i];
        // nodes[i] は nodes.item(i) と完全に一致する
    // 以下なんらかの処理...
}

また、全ての子ノードではなく、子ノードのうちの一番最初のもの、および一番最後のものを得る方法もあります。 Node インターフェイス の 読み取り専用属性 firstChild と 読み取り専用属性 lastChild を使用します。

// body 要素を取得
var bodyElem = document.getElementsByTagName("body").item(0);
// body 要素の最初の子ノードを取得
var firstNode = bodyElem.firstChild;
    // bodyElem.firstChild は bodyElem.childNodes.item(0) と完全に一致する

// body 要素の最後の子ノードを取得
var lastNode = bodyElem.lastChild;
    // bodyElem.lastChild は
    // bodyElem.childNodes.item( bodyElem.childNodes.length - 1 ) と完全に一致する

なお、子ノードが 0 個のときは firstChild プロパティも lastChild プロパティも null です。

兄弟要素を取得する

以下のような HTML を考えます。

  
...
  
...
  
...