【脱jQuery】JavaScriptだけでセレクタ指定により要素を取得する

スポンサーリンク

脱jQueryのためのメモ。

要素を取得するためのメソッド

  • ID指定の場合はdocument.getElementById、それ以外はdocument.querySelectorAll(1要素だけ取得する場合はdocument.querySelector)を使う
  • document.getElementsByClassNameは使わない(戻り値であるHTMLCollectionはブラウザによってはiterableではない=forEachなどが使えない)
  • 入力値の取得はdocument.getElementById('xxx').valueのようにvalueプロパティを使う
  • 属性値の取得/設定はel.getAttribute('foo')el.setAttribute('foo', 'bar')を使う(elはElementオブジェクト)

戻り値

  • document.getElementByIddocument.querySelectorはElementオブジェクト
  • document.querySelectorAllはNodeList、document.querySelectorは最初にマッチしたElementオブジェクト
  • document.getElementsByClassNamedocument.getElementsByTagNameはHTMLCollectionオブジェクト
  • セレクタにマッチしなかった場合、jQueryは空配列を返すが、DOM APIはNULLを返す
  • 戻り値をfor inやforeachでループさせると、ブラウザによって挙動が変わるので注意が必要

コメント