イナヅマTVログ

JavaScript, querySelectorとquerySelectorAllを使いましょ

| 1件のコメント

HTML DOMElementを取得する時のお話。

みんなが大好きjQueryを使うのが一番楽です。

var $main = $('#main .className');
var $mainPs = $('#main p');

jQueryを使わないとどうする?
getElementByIdとgetElementsByTagName, getElementsByClassNameを組み合わせて使用することになります。

var mainClass = document.getElementById('main').getElementsByClassName('className');
var mainPs = document.getElementById('main').getElementsByTagName('p');

querySelectorAllを使えば簡単だし早い

モダンなブラウザに用意されているquerySelectorAllを使えばjQueryセレクターAPIの様に指定でき配列でデータを取得可能です。

var mainClass = document.querySelector('#main .className');
var mainPs = document.querySelectorAll('#main p');

document.getElementByIdの時と違いSelectorにはjQueryと同じように#とか.を使います。

先頭の一つだけを取得する querySelector も用意されています。

MDN: document.querySelector
MDN: Document.querySelectorAll

update【訂正】
大きな勘違いでした。
間違っていたので大幅に加筆修正をしました、ごめんなさい。
単純なID指定の場合はgetElementByIdが最速です。

1件のコメント

  1. ピンバック: 超個人的メモ, JavaScript関連の投稿リンクをまとめておく « イナヅマTVログ

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください