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

2015-12-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 ?

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

参考

全部挙げたら長くなった(笑)。