JavaScriptでのノード操作
ご存知の通り、タグは他のタグを含むことができます。あるいはJavaScriptの用語で言えば、DOM要素は他のDOM要素を含むことができます。しかしそれに加えて、コメントや通常のテキストを含むこともあります。コメント、テキスト、DOM要素は、一つの名称「ノード」でまとめられます。
あなたは既に、firstElementChild、
lastElementChild、
nextElementSibling、
previousElementSiblingといったプロパティに親しんでいることでしょう。これらのプロパティはまさにDOM要素に対して働き、他のノードは無視します。通常、これがまさに私たちが必要としていることです。
しかしながら、firstChild、
lastChild、nextSibling、previousSiblingといったプロパティも存在します。これらのプロパティは同様の方法で働きますが、しかしながらすべてのノードを考慮に入れます。例を見て、これらのプロパティの違いを見てみましょう。三つのノードを含むdivがあるとします：
<div id="elem"><!--com-->テキスト<span>タグ</span></div>
このdivへの参照を変数に取得しましょう：
let elem = document.querySelector('#elem');
それでは、firstChildプロパティとfirstElementChildプロパティに何が含まれているかを見てみましょう：
console.log(elem.firstChild); // コメント
console.log(elem.firstElementChild); // spanタグ
lastChildとlastElementChildの違いを示すコードを書いてください。
nextSiblingとnextElementSiblingの違いを示すコードを書いてください。
previousSiblingとpreviousElementSiblingの違いを示すコードを書いてください。
