JavaScriptでHTMLドキュメントから、DOM要素を取り出すAPIの一覧を探す機会があったので、ここにまとめてみます。
表：DOM要素を取り出すAPIの一覧
| メソッド名 | 意味 |
| document.getElementById(id) | id属性を付与した要素を取得する |
| document.getElementsByName(name) | name属性を付与した要素一覧を取得する |
| document.getElementsByTagName(tagname) | 指定タグの要素一覧を取得する |
| docuemnt.querySelector(sel) | 指定CSSセレクタに一致するはじめの要素を取得する |
| document.querySelectorAll(sel) | 指定CSSセレクタに一致する要素を全て取得する |
こうして一覧にすると、5つもパターンがあり、どのように使い分けたら良いのかちょっと悩んでしまうかもしれません。
上から三つは、よく知られています。それぞれ、id属性、name属性、タグ名で要素一覧を取得するものです。下の二つは、比較的新しいAPIで、CSSのセレクタを指定して、DOM要素を取得するというものです。比較的新しいので、IE(Internet Explorer)では8以降、Firefoxでは3.6以降、iOSは3.2以降、Androidは2.1以降で実装されています。
クジラ机ブログ