【JavaScript】要素取得方法まとめ(これを見ればOK)

JavaScript
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

はじめに


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() さえ使えればなんとかなりそうです。