[JavaScript] 頻出document.getElementByIdを短く書く
JavaScriptの頻出のアレ、document.getElementByIdを短く書く。必要な場面でいちいち書いてられん。短く書けるように最初の方で定義しておく
要点はこう：
document.getElementByIdを短く書けるようにする。
document.getElementsByClassNameを短く書けるようにする。
document.querySelectorAllを短く書けるようにする。
↓
$(任意のID名)
$cls(任意のclass名)
$qcls(任意のclass名 > 任意のタグ名)とか
$tags(任意のclass名 > 任意のタグ名)とか変数名はお好きに
以上。
この記事は、既出Qiita記事
でも扱いのあった、idやclass取得を短く記述する方法についてです。厳密には短く記述するための準備、です。
※後日推敲＆上書き ＆ 追記 「✔︎ 取得後のアレコレ」の項目全体
前提
【！】ここで紹介する方法は、エラーハンドリングなし
id名がhtmlタグの方に無かった場合の挙動、エラーハンドリング。
ブラウザの開発者ツールのコンソールではエラー表示が出るでしょうが、そもそも無いid名を指定しようとはならないやろ？ということで。
id名のスペルミスなら単なるケアレスミスだし。
【！】class名取得にdocument.querySelector(取得できるのは最初の一つだけ)はここでは扱わない
document.getElementsByClassNameかdocument.querySelectorAllを使う。
⭐️id名取得、class名取得を短く書くための前準備コード
関数式タイプと、関数文タイプでコード例を書いています。
※関数式/関数文どちらを使うかはお好みで
↓const始まり(関数式)の書き方の場合、jsコードの冒頭に記述。
↓function始まり(関数文)の書き方の場合、どこでもスキな位置に記述。
// id名取得
const $=(id)=>{return document.getElementById(id)}
// class名取得, 2パターン
const $cls=(cls)=>{return document.getElementsByClassName(cls)}
const $qcls=(cls)=>{return document.querySelectorAll(cls)}
// またはチガウ変数名でも、お好みで分かり易いのをドウゾ
const $tags=(tags)=>{return document.querySelectorAll(tags)}
// id名取得
function $(id){return document.getElementById(id)}
// class名取得, 2パターン
function $cls(cls){return document.getElementsByClassName(cls)}
function $qcls(cls){return document.querySelectorAll(cls)}
// またはチガウ変数名でも、お好みで分かり易いのをドウゾ
function $tags(tags){return document.querySelectorAll(tags)}
id名取得やclass名取得を短く書くためには、ここに挙げるサンプルコード(正味３行分)を予め記述しておく。
すると、
// id名取得 は以降、必要な時にはこんな感じで書くだけ (変数もid名も例)
const tgt = $('target_tag');
/* これはこう書いたのと同じ
const tgt = document.getElementById('target_tag');
(⁰▿⁰)◜いや〜、短くなってシンプルシンプル♪ */
注意するところ
✔︎ 引数部分の書き方
● document.getElementById、document.getElementsByClassNameの場合
idやclassの指定は「#」や「.」を除いたid名そのもの、class名そのものを使う。
具体的には：
- document.getElementById('id名')
- document.getElementsByClassName('class名')
- document.getElementsByClassName('class名1 class名2 class名3')
- document.getElementsByTagName('tag名')
✅ getElementかgetElementsか、すなわちtかtsかスペルミス注意
✅ class名は複数指定可、複数指定は空白区切りで列挙
✅ getElementsByTagNameの戻り値はHTMLCollectionオブジェクト
● document.querySelectorAllの場合
CSSセレクタ タグ名やid名やclass名でHTML要素を全て取得。引数の
id名には「#」、class名には「.」が必要=cssの仕様と同じ。上記getElementById、getElementsByClassNameとの違いに注意。「#」や「.」が有るか無いか。
具体的には：
- document.querySelectorAll('tag名')
- document.querySelectorAll('.class名')
- document.querySelectorAll('tag名.class名')
- document.querySelectorAll('tag名#id名') ....など
✅ 取得した要素は配列として格納される
✅ 引数に配列での指定が可能
※“引数”とは上記でいう色付きのヶ所、 tag名、.class名、tag名.class名、tag名#id名…の部分
✅ class名もid名もない任意のタグを指定できる
✅ 使い所：深い要素に処理を加えたい場合など
✅ document.querySelectorAllの返り値はStaticNodeListオブジェクト
ただしclass名取得は
getElementsByClassName('class名')の方が処理が早い
✔︎ 取得後のアレコレ
querySelectorAllで返されるのは、
NodeList ではなく、StaticNodeListオブジェクト ※下記Array.from参照
StaticNodeList はオブジェクトに変更を加えてもDOM ツリーに反映されない。
Array.from(□)
配列のようなオブジェクト(引数の□部分)や反復可能オブジェクト□から新たに配列を作成
querySelectorAllの場合この一手間、コレ大事。
/* 取得後の処理によっては＝変更を加えることがある場合は
処理できるカタチ(変更を受け付ける)にまで もっていっておくことが必要。
例えば Array.from を使ってこんな感じに、２行
*/
const tags = $qtag('div > .ex');
const tagEle = Array.from(tags);
/* もしくは、ひといきにこのように書くのと同じ、１行
const tagEle = Array.from($qtag('div > .ex'));
(⁰▿⁰)◜ 短いっ、省スペース万歳ならこの書き方♪ */
ほか、
⚠︎querySelectorAllの戻り値は Nodelist なので、forEach が使える
⚠︎getElementsByClassNameの戻り値は HTMLCollectionで forEach使えない
などなど。
白状すると、戻り値の種類(?)がどーたらこーたらについては自分もよく分かってない。※ただ、個人的学習/復習用JSメモにそう書いてあるので大事なこと/忘れがちなこと、というか。我ながらこれに関してはいつも見返しているわけなんだけども。
ひとつ、分かっているのは 取得後のアレコレ操作で必要。というかこれをしないことにはアレコレ操作=処理が出来ないんよな、つまるところ。
終わりに
余談：関数式タイプ、関数文タイプ
コード記述に使用するエディタがfunctionを認識し、ステータスバーなどから確認できる情報としてfunctionを取得＆リスト表示する便利機能をもってる時、認識するのを(自分で思ってる)メイン系のfuncのみの場合にしたいとき、関数式タイプにするか、関数文タイプにするかは少し意味があります。具体的にはtext/code系エディタ TextMate.appはfunctionを認識しステータスバーからリスト表示できる、そのリスト表示がやたらと多くなりすぎないようにしたい。
❶コード記述に使用するテキスト系エディタがfunctionを認識しリスト表示してくれる機能がある
❷すべて関数文で書いている ＆ なんだかんだコード量が多い
→やたらめったらfunctionだらけになる
❸そこでfunctionを認識するのをメイン系のfuncのみにするとして、こういった準備段階や周辺func的なものを関数式にしておく
❹関数式だと→functionで認識しなくなる
→ほんとうに重要なfunctionだけリスト表示されるようになる
ここでいう「メイン系のfunc」とは自分がメイン系だと思う分(または定める分)。
個人的にはfunction文で書くのはプログラム全体の一部=メイン系だと思う分。準備段階や周辺func系は関数式で書く場合が多い。