JavaScriptでのノード操作

ご存知の通り、タグは他のタグを含むことができます。あるいはJavaScriptの用語で言えば、DOM要素は他のDOM要素を含むことができます。しかしそれに加えて、コメントや通常のテキストを含むこともあります。コメント、テキスト、DOM要素は、一つの名称「ノード」でまとめられます。

あなたは既に、firstElementChild、 lastElementChild、 nextElementSibling、 previousElementSiblingといったプロパティに親しんでいることでしょう。これらのプロパティはまさにDOM要素に対して働き、他のノードは無視します。通常、これがまさに私たちが必要としていることです。

しかしながら、firstChild、 lastChild、nextSibling、previousSiblingといったプロパティも存在します。これらのプロパティは同様の方法で働きますが、しかしながらすべてのノードを考慮に入れます。例を見て、これらのプロパティの違いを見てみましょう。三つのノードを含むdivがあるとします：

html<div id="elem"><!--com-->テキスト<span>タグ</span></div>

このdivへの参照を変数に取得しましょう：

javascriptlet elem = document.querySelector('#elem');

それでは、firstChildプロパティとfirstElementChildプロパティに何が含まれているかを見てみましょう：

javascriptconsole.log(elem.firstChild);        // コメント
console.log(elem.firstElementChild); // spanタグ