ネイティブjavascriptでHTMLの要素を取得する！脱jQueryはじめの一歩
ネイティブなjavascriptを使いたい方こんにちわ。
jQueryで要素を取得する時に使う「$()」は、すごい便利です
では、javascriptでHTMLの要素を取得するにはどうしたらいいのか
ざっと分けると6種類
順番に見ていってみます。
IDを指定して要素を取得する
まずはHTMLタグにidを指定して、そのidから取得する場合です。
要素を取得するまでの時間は最も早い。
基本的にはidは同ページ内に１度しか指定しないはずですが、
もし２個以上同じidが存在した場合は初めに指定されている要素を取得します。
javascript
- document.getElementById()
タグを指定して要素を取得する
HTMLのタグを直接指定して要素を取得します。
あまり使用した記憶がありません…
HTML Collectionを取得するので配列の様に扱える。
javascript
- document.getElementsByTagName()
- element.getElementsByTagName()
クラス名を指定して要素を取得する
HTMLタグに指定したクラス名で要素を取得する。
タグの場合と同じく、HTML Collectionを取得します。
idで指定できない要素を取得する際によく使います。
javascript
- document.getElementsByClassName()
- element.getElementsByClassName()
nameの値を指定して要素を取得する
業務で使用した事はありません。
NodeListで取得されます。
javascript
- document.getElementsByName()
CSSのようにセレクターを指定してはじめの要素を取得する
セレクターを指定して要素を一つだけ取得するので、使いやすいかもしれません。
取得した要素はそのままelementとして利用できます。
javascript
- document.querySelector()
- element.querySelector()
CSSのようにセレクターを指定してすべての要素を取得する
jQueryユーザーには馴染みの$()
指定したセレクターに該当する要素を全て取得します。
NodeListで取得されます。
javascript
- document.querySelectorAll()
- element.querySelectorAll()
まとめ
HTMLCollectionやNoteListは配列のようにlengthプロパティを持っているので、
「forEach」メソッドは持っていないので使えませんが、
「for」を使ってループすることは出来ます。
HTMLCollection[i] NodeList[i]の、
それぞれのプロパティを変更、取得できます。
脱jQuery第二弾はこちら
javascriptでclassを操作するclassListの使い方【脱jQuery】