Programming Field

DOMで要素を作成・追加・削除する

このページでは、DOMで要素を作成し、それをドキュメントや他の要素に追加・削除する方法を紹介します。

※ 要素の作成以外は、Elementインターフェイスに限らずすべてのNodeインターフェイスで共通の技術です。ただし親要素によって追加できるノードの種類が異なるため注意が必要です。

[関連キーワード: createElement、appendChild、insertBefore、removeChild、DocumentFragment、createDocumentFragment]

要素の作成・追加

DOMで要素(Element)を作成するには、DocumentインターフェイスのcreateElementメソッドを使用します。

[JavaScript]

var newElement = document.createElement("div");

しかし、createElementは単に要素を作成するにすぎないため、これだけでは何の意味も持ちません。そこで、作成した要素を既存の要素に結びつけるため、NodeのappendChildメソッド、またはinsertBeforeメソッドを使います。

[JavaScript]

document.body.appendChild(newElement);

※ newElementが既に子要素として存在する場合、appendChild/insertBeforeメソッドはまずその子要素を削除し、改めて追加を行います。
※ newElementを追加しようとする要素が所属するDocumentと、newElementを作成した(createElementを呼び出した際に使った)Documentが一致しない場合はエラー(WRONG_DOCUMENT_ERR)となります。

要素が追加されると、その要素が子要素リスト内の最初の要素や最後の要素であった場合、それぞれ親要素のfirstChild、lastChildが自動更新されます。またこれとは別に、該当する子要素のpreviousSibling(リストにおける、ある子要素の前の子要素)/nextSibling(ある子要素の次の子要素)も更新されます。

要素の削除

要素を削除するにはremoveChildメソッドを使います。

[JavaScript]

var element = document.body.childNodes[0];
document.body.removeChild(element);

removeChildメソッドが取る引数はNodeであるため、あらかじめchildNodesやfirstChildなどを使って削除したい要素のインスタンスを取得しておく必要があります。

なお、removeChildで削除した要素自体はまだ生きているため、そのまま他の要素に追加するなどを行うことができます。(C言語などでMSXMLのIXMLDOMNodeインターフェイスを使っている場合は、IUnknown::Releaseを呼び出すまで再利用することができます。)

要素の置き換え

DOMでは追加・削除の他にreplaceChildメソッドを使って要素を置き換えることができます。

[JavaScript]

var newElement = document.createElement("a");
var oldElement = document.body.lastChild;
document.body.replaceChild(newElement, oldElement);

replaceChildメソッドの引数の順番は、「新しいノード」「古いノード」の順番ですので注意してください。

ノードに追加できるノード

DOMでは、ある親ノードに対して、appendChildなどを使って追加できるノードの種類が決まっています。

※ Attrを追加できる場所はElementのattributes。
※ Entity、およびNotationは追加不可能。もともと作成不可能であり、読み取り専用でDocumentTypeから取得できます。
※ DocumentTypeの制限は「DOM Level2 Core Specification」より定義。

おまけ: DocumentFragment

DocumentFragmentは、Elementなどと同様にいくつかの要素を子に持つことが出来るインターフェイスです。DocumentFragmentはNodeから継承しているインターフェイスですが、DocumentFragment自身には新たなメソッドが定義されていません。DocumentFragmentのインスタンスを作成するにはDocumentのcreateDocumentFragmentメソッドを使い、他のNodeと同様appendChildを使ってあるノードに追加することができます。

ここで、DocumentFragmentがappendChildやinsertBeforeの引数に渡されると、これらのメソッドはDocumentFragmentそのものではなく、その子ノードをまとめて自分の子ノードとして追加する処理を行います。

例えば、

[JavaScript]

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode("ABC")):
fragment.appendChild(document.createElement("br")):
fragment.appendChild(document.createTextNode("DEF")):
var insertPos = document.getElementById("footer");
insertPos.parentNode.insertBefore(fragment, insertPos);

というコードが実行されると、idが「footer」である要素の直前に、「Text "ABC"」、「<br>タグ」、「Text "DEF"」が順に追加されます。

既にブラウザー上に表示されているノードに対して一度に多くのノードを追加する場合は、都度対象の要素にノードを追加する処理を行うと、そのたびにブラウザー上の表示更新処理が行われ、場合によってはちらつきや速度低下を及ぼすことがあります。そこでDocumentFragmentを介すると、対象ノードへのノード群の追加処理がまとめて一度だけとなるため、ノード追加のパフォーマンスの向上を図ることができます。

最終更新日: 2018/02/20