はじめに
JavaScriptにおいて、HTMLの要素を取得するには様々な方法があります。
今回は様々な要素取得方法をまとめました。最初に最低知識について記述します。
Node
ノードとはいくつもの DOM API オブジェクトタイプが継承しているインターフェイスで、それらのさまざまなタイプを同じように扱えるようにしたものです。
簡単に言うとDOMを構成する文字列やコメント、タグなどを扱うために必要なもの。
例
<!DOCTYPE html>
<!– コメント –>
<span>Text</span>
Element
ElementはDocumentの中にあるすべての要素が継承する、もっとも一般的なものです。このインターフェイスはNodeを継承しています。
例
<xml>
<svg>
HTMLElement
HTMLElementは、Elementを継承しており汎用的で任意のHTML要素を表します。
例
<header>
<main>
<footer>
<article>
<section>
HTML(*)Element
HTMLCollection を継承した独自のインターフェースです。
NodeList
DOMノードの集合を表すオブジェクト（インターフェース）で、構造は配列に似ています。
要素が取得できるメソッド
document.getElementById()
返り値： HTMLElement / null
言わずと知れた、指定した ID を持つ要素を取得します。
もし存在しなかった場合は null が返ります。
万が一、DOMに同じIDを持つ要素が複数存在する場合は最初の要素しか取得できません。
document.getElementsByTagName()
返り値： HTMLCollection
タグ名を指定して取得します。HTMLCollection なので、DOMの操作をした場合に中身が変わる可能性があります。
document.getElementsByClassName()
返り値： HTMLCollection
クラス名を指定して取得します。HTMLCollection なので、DOMの操作をした場合に中身が変わる可能性があります。
document.getElementsByName()
返り値： NodeList
要素の name 属性の値を元に要素を取得します。
このメソッドはブラウザごとに動作が異なる場合があるだけでなく、HTML5においてはほとんど活躍することはないと思います。
document.querySelector()
返り値： HTMLElement
CSSセレクタでマッチした最初の要素を取得します。
CSS3のセレクタの記述もブラウザが対応していれば可能です。
document.querySelectorAll()
返り値： NodeList
CSSセレクタでマッチした要素を取得して NodeList として返します。
CSS3のセレクタの記述もブラウザが対応していれば可能です。
jQuery の $('selector') に近いメソッドです。
後書き
今のブラウザの処理速度を考えると、今後は getElementById()、querySelector()、querySelectorAll() さえ使えればなんとかなりそうです。