Node

継承関係
継承元   継承先
Node
(ドキュメント ツリーのノード)
 Document
(XMLまたはHTMLドキュメント)
 HTMLDocument
(HTMLドキュメント ツリーのルート)
Element
(XMLまたはHTMLの要素)
 HTMLElement
(HTMLドキュメントの要素)

Nodeの追加

Node appendChild( Node newChild );

ドキュメント ツリーの最後にNodeを追加する。

Node insertBefore( Node newChild, Node refChild );

ドキュメント ツリーの指定位置の直前にNodeを追加する。

指定位置の直後にNodeを追加するメソッドは用意されていませんが、指定位置のノードの直後のノードをnextSiblingで取得し、その直前にinsertBefore()をすることで所望の動作を実現できます。このとき指定位置のノードが最後の場合にはnextSiblingはnullを返しますが、insertBefore()の第2引数にnullを渡した場合にはドキュメント ツリーの最後にNodeが追加されるため、このようなときも正しく処理されます。

node.insertBefore( newChild, refChild.nextSibling );
element.insertBefore - MDN

Nodeの削除

Node removeChild( Node oldChild );

指定のノードを削除する。

Node replaceChild( Node newChild, Node oldChild );

指定のノードを削除し、新しいノードに置換する。

すべての子ノードの削除

子ノードが存在しなくなるまで、ノードの削除をくり返します。

while( node.hasChildNodes() )
{
    node.removeChild( node.lastChild );
}

Nodeの探索

関係 プロパティ 説明
親 parentNode 親ノード
兄弟 previousSibling 直前のノード
nextSibling 直後のノード
子 childNodes すべての子ノード
firstChild 最初の子ノード
lastChild 最後の子ノード

NodeがHTMLCollectionオブジェクトを返すプロパティを持つならば、これとは異なる方法でNodeを参照できます。

サンプル

下記の構造のドキュメントを例に、id="B2"を基準とした際の各プロパティが参照するNodeを示します。ただし事項で示すように、Internet Explorer以外ではこのような結果となりません。

<div id="A">                 // parentNode
    <div id="B1"></div>      // previousSibling
    <div id="B2">            // 基準
        <div id="C1"></div>  // childNodes[ 0 ], firstChild
        <div id="C2"></div>  // childNodes[ 1 ]
        <div id="C3"></div>  // childNodes[ 2 ], lastChild
    </div>
    <div id="B3"></div>      // nextSibling
</div>

ブラウザによる解釈の違い

前述のドキュメントに対して次のコードを実行し、ブラウザごとの相違を調査します。

<pre>
<script type="text/javascript">
  var element = document.getElementById( 'B2' );

  document.writeln( element.parentNode.id );

  document.writeln( element.previousSibling.id );
  document.writeln( element.nextSibling.id );

  document.writeln( element.firstChild.id );
  document.writeln( element.lastChild.id );
</script>
</pre>
ブラウザ コードの実行結果 childNodesの値
IE6 
A
B1
B3
C1
C3
 
IE7
IE8
Firefox3 
A
undefined
undefined
undefined
undefined
childNodesの値一覧
(Firebugによる取得結果)
Chrome4 
A
undefined
undefined
undefined
undefined
childNodesの値一覧
(Developer Toolsによる取得結果)

このような違いは、空白や改行をNodeとして認識するか否かによって生じます。よって次のように空白などを含まない表記とすれば、ブラウザによる相違は発生しません。

<div id="A"><div id="B1"></div><div id="B2"><div id="C1"></div><div id="C2"></div><div id="C3"></div></div><div id="B3"></div></div>

一方で、次に示す新しく実装されたプロパティ (Element Traversal Specification) を用いれば、空白などを除外してNodeを取得できます。

Element Traversal Specification
関係 Node Element
親 parentNode -
兄弟 previousSibling previousElementSibling
nextSibling nextElementSibling
子 childNodes children
firstChild firstElementChild
lastChild lastElementChild
Element Traversal Specification - W3C