[JavaScript] 頻出document.getElementByIdを短く書く

# [JavaScript] 頻出document.getElementByIdを短く書く
JavaScriptの頻出のアレ、`document.getElementById`を短く書く。必要な場面でいちいち書いてられん。短く書けるように最初の方で定義しておく

要点はこう：

:::note
`document.getElementById`を短く書けるようにする。
`document.getElementsByClassName`を短く書けるようにする。
`document.querySelectorAll`を短く書けるようにする。
↓
`$(任意のID名)`
`$cls(任意のclass名)`
`$qcls(任意のclass名 > 任意のタグ名)`とか
`$tags(任意のclass名 > 任意のタグ名)`とか変数名はお好きに
:::

以上。

この記事は、既出Qiita記事
- [円形プログレスバー 自動生成&設定 (CSS,SVG,JS)](https://qiita.com/Reng/items/cc34099bec22c484057a)

- [html5：audio・videoタグの音量初期値を設定(指定)するjavascript](https://qiita.com/Reng/items/d4d3cf22ad048053f4e1)

でも扱いのあった、idやclass取得を短く記述する方法についてです。厳密には短く記述するための準備、です。

※後日推敲＆上書き ＆ 追記 「[✔︎ 取得後のアレコレ](https://qiita.com/drafts/6f340959c02bf9a5d44e#%EF%B8%8E-%E5%8F%96%E5%BE%97%E5%BE%8C%E3%81%AE%E3%82%A2%E3%83%AC%E3%82%B3%E3%83%AC)」の項目全体


## 前提
【！】ここで紹介する方法は、エラーハンドリングなし

id名がhtmlタグの方に無かった場合の挙動、エラーハンドリング。

ブラウザの開発者ツールのコンソールではエラー表示が出るでしょうが、そもそも無いid名を指定しようとはならないやろ？ということで。
id名のスペルミスなら単なるケアレスミスだし。

【！】class名取得に`document.querySelector`(取得できるのは最初の一つだけ)はここでは扱わない

`document.getElementsByClassName`か`document.querySelectorAll`を使う。


## ⭐️id名取得、class名取得を短く書くための前準備コード
:::note
関数式タイプと、関数文タイプでコード例を書いています。
※関数式/関数文どちらを使うかはお好みで
:::

↓const始まり(関数式)の書き方の場合、jsコードの冒頭に記述。
↓function始まり(関数文)の書き方の場合、どこでもスキな位置に記述。

```javascript:関数式タイプjs
// 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)}
```

```javascript:関数文タイプjs
// 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名取得を短く書くためには、ここに挙げるサンプルコード(正味３行分)を予め記述しておく。
すると、

```javascript:JS：以降 このように短く書ける
// id名取得　は以降、必要な時にはこんな感じで書くだけ (変数もid名も例)
const tgt = $('target_tag');

/* これはこう書いたのと同じ
const tgt = document.getElementById('target_tag');

(⁰▿⁰)◜いや〜、短くなってシンプルシンプル♪ */
```
## 注意するところ
### ✔︎ 引数部分の書き方
● __`document.getElementById`、`document.getElementsByClassName`の場合__
idやclassの指定は「#」や「.」を**除いた**id名そのもの、class名そのものを使う。

具体的には：
- document.getElemen<font color=tomato>t</font>ById('<font color=deepskyblue>id名</font>')
- document.getElemen<font color=tomato>ts</font>ByClassName('<font color=deepskyblue>class名</font>')
- document.getElemen<font color=tomato>ts</font>ByClassName('<font color=deepskyblue>class名1</font> <font color=deepskyblue>class名2</font> <font color=deepskyblue>class名3</font>')
- document.getElemen<font color=tomato>ts</font>ByTagName('<font color=#B168A8>tag名</font>')

<font color=seagreen>✅ `getElement`か`getElements`か、すなわち<font color=tomato>t</font>か<font color=tomato>ts</font>かスペルミス注意
✅ class名は複数指定可、複数指定は空白区切りで列挙
✅ `getElementsByTagName`の戻り値は`HTMLCollection`オブジェクト</font>

 　
● __`document.querySelectorAll`の場合__
CSSセレクタ <font color=#B168A8>タグ名</font>やid名やclass名でHTML要素を全て取得。引数の
<font color=deepskyblue>id名には「<font color=#2E64FE>#</font>」、class名には「<font color=#tomato>.</font>」が必要=cssの仕様と同じ。</font>上記`getElementById`、`getElementsByClassName`との違いに注意。「<font color=#2E64FE>#</font>」や「<font color=#tomato>.</font>」が有るか無いか。

具体的には：
- document.querySelectorAll('<font color=#B168A8>tag名</font>')
- document.querySelectorAll('<font color=#2E64FE>.</font><font color=deepskyblue>class名</font>')
- document.querySelectorAll('<font color=#B168A8>tag名</font><font color=#2E64FE>.</font><font color=deepskyblue>class名</font>')
- document.querySelectorAll('<font color=#B168A8>tag名</font><font color=#2E64FE>#</font><font color=deepskyblue>id名</font>')		....など

<font color=seagreen>**✅ 取得した要素は配列として格納される**
**✅ 引数に配列での指定が可能** 
※“引数”とは上記でいう色付きのヶ所、 <font color=#B168A8>tag名</font>、<font color=#2E64FE>.</font><font color=deepskyblue>class名</font>、<font color=#B168A8>tag名</font><font color=#2E64FE>.</font><font color=deepskyblue>class名</font>、<font color=#B168A8>tag名</font><font color=#2E64FE>#</font><font color=deepskyblue>id名</font>…の部分
✅ class名もid名もない任意のタグを指定できる
✅ 使い所：深い要素に処理を加えたい場合など
✅ `document.querySelectorAll`の返り値は`StaticNodeList`オブジェクト</font>

:::note
ただしclass名取得は
`getElementsByClassName('class名')`の方が処理が早い</font>
:::


### ✔︎ 取得後のアレコレ
`querySelectorAll`で返されるのは、 
`NodeList` ではなく、`StaticNodeList`オブジェクト <font color=darkgray>※下記`Array.from`参照</font>

`StaticNodeList` はオブジェクトに<font color=tomato>変更を加えてもDOM ツリーに反映されない。</font>

__Array.from(<font color=deepskyblue>□</font>)__
配列のようなオブジェクト(引数の<font color=deepskyblue>□</font>部分)や反復可能オブジェクト<font color=deepskyblue>□</font>から新たに配列を作成

`querySelectorAll`の場合この一手間、コレ大事。
```javascript: JavaScript：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`使えない
などなど。

白状すると、戻り値の種類(?)がどーたらこーたらについては自分もよく分かってない。<font color=darkgray>※ただ、個人的学習/復習用JSメモにそう書いてあるので大事なこと/忘れがちなこと、というか。我ながらこれに関してはいつも見返しているわけなんだけども。</font>

ひとつ、分かっているのは 取得後のアレコレ操作で必要。というかこれをしないことにはアレコレ操作=処理が出来ないんよな、つまるところ。

## 終わりに
__余談：関数式タイプ、関数文タイプ__
コード記述に使用するエディタが`function`を認識し、ステータスバーなどから確認できる情報として`function`を取得＆リスト表示する便利機能をもってる時、認識するのを(自分で思ってる)メイン系のfuncのみの場合にしたいとき、**関数式タイプにするか、関数文タイプにするかは少し意味があります**。具体的にはtext/code系エディタ **TextMate.app**はfunctionを認識しステータスバーからリスト表示できる、そのリスト表示がやたらと多くなりすぎないようにしたい。

❶コード記述に使用するテキスト系エディタが`function`を認識しリスト表示してくれる機能がある
❷すべて関数文で書いている ＆ なんだかんだコード量が多い　
　→やたらめったら`function`だらけになる
❸そこで`function`を認識するのを**メイン系のfuncのみ**にするとして、こういった準備段階や周辺func的なものを関数式にしておく
❹関数式だと→`function`で認識しなくなる
　→ほんとうに重要な`function`だけリスト表示されるようになる
　
ここでいう「メイン系のfunc」とは自分がメイン系だと思う分(または定める分)。

個人的には`function`文で書くのはプログラム全体の一部=メイン系だと思う分。準備段階や周辺func系は関数式で書く場合が多い。