脱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でループさせると、ブラウザによって挙動が変わるので注意が必要