【脱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.getElementByIdとdocument.querySelectorはElementオブジェクト
  • document.querySelectorAllはNodeList、document.querySelectorは最初にマッチしたElementオブジェクト
  • document.getElementsByClassNameとdocument.getElementsByTagNameはHTMLCollectionオブジェクト
  • セレクタにマッチしなかった場合、jQueryは空配列を返すが、DOM APIはNULLを返す
  • 戻り値をfor inやforeachでループさせると、ブラウザによって挙動が変わるので注意が必要
スポンサーリンク

コメント