ノードと要素は別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 12日目）

DOMおれおれAdvent Calendar 2015 – 12日目分

ノードの子ノードのうち先頭のものを手早く取得するのには firstChild と firstElementChild の二種類があります。

<html><head></head><body></body></html>

var elHtml = document.documentEement;  // <html>
console.log(elHtml.firstChild);  // => <head>
console.log(elHtml.firstElementChild);  // => <head>

何が違うかと言うと、まあ読んで字の如くなんですが、後者は要素ノードに絞った中から先頭のものを返します。

例えばこんなHTML。

<ul>
  <li>This is the 1st item.</li>
  <li>This is the 2nd item.</li>
  <li>This is the 3rd item.</li>
</ul>

ここで el に上記 <ul> が格納されているものとすると、 el.firstElementChild は最初の <li> になります。想定通りと思います。一方 el.firstChild はというと、 <ul> と最初の <li> の間の「改行とインデント」から成る文字列ノードが格納されています。そう、文字列もノードです。

デモ

他にもこんな感じで「ノード全種から取得」するものと「要素ノードの中から取得」するものとがあります。

parentNode vs parentElementNode
children vs childNodes
firstChild vs firstElementChild
lastChild vs lastElementChild ?
previousSibling vs previousElementSibling ?
nextSibling vs nextElementSibling ?

まあ適宜使い分けましょう。

参考

全部挙げたら長くなった（笑）。