■目次
JavaScript|生のJavaScriptでHTML要素を取得する方法
スポンサーリンク
jQueryなどのライブラリを使わずに生のjavascriptでDOMを検索して取得する方法をメモしています。
id指定
getElementById()にて、id指定でHTML要素を取得できます。
var element = document.getElementById("id名");
クラス指定
getElementsByClassName()にてクラス名を指定して要素を取得できます。
var elementList = document.getElementsByClassName('クラス名');
取得結果には、複数の配列が入ります。
一つの要素だけ欲しい場合は、elementList[2]みたいに書いて配列を指定します。
タグ指定
getElementsByTagName()にて、タグを指定でHTML要素を取得できます。
var elementList = document.getElementsByTagName("div");
取得結果には、複数の配列が入ります。
CSSセレクター指定
querySelector()またはquerySelectorAll()でCSSセレクター指定でHTMLの要素を取得できます。
// 最初の一つの要素のみ var element = document.querySelector('#logo'); // 該当するすべての要素を取得 var elementList = document.querySelectorAll('.title_sub');
更新日:2018年08月26日
作成日:2018年07月17日