はじめに
検索したら腐るほど記事が出てくると思いますが、jQueryをJavaScript(以下js)へ書き換える案件に新人と入る為、簡単にまとめ。
内容は基本的にMDNと
JavaScript本格入門
の二つを参考に作成していますが、記事書いている本人もjsが得意な訳ではないので間違いがあるかもしれませんが、その際はご指摘いただけますと幸いです。
DOMとは
Document Object Modelの略
ブラウザに表示されているHTML等をオブジェクトとノードとして表現することで、jsで操作することが出来るようにするAPI。
要素の取得
HTMLの要素を取得するには主に以下のような方法がある
- document.getElementBy~("hoge")
- document.querySelector("#hoge")
- document.querySelectorAll(".fuga")
- $(".fuga")
上3つがjsで要素を取得する際に利用される記法
最後の一つがjQueryの記法
例 次のhtmlからpタグを取得する
<body>
<div>
<p class="fuga" id="hoge1">id_hoge1</p>
<p class="fuga" id="hoge2">id_hoge2</p>
</div>
</body>
// 指定した値に一致するidを持つ要素だけを取得
const p_hoge_gemb1 = document.getElementById('hoge1'); // 取得したい要素のidを入力
const p_hoge_qs1 = document.querySlector('#hoge1'); // セレクターの指定はCSSと同じ
const p_hoge_jq1 = $("#hoge1") // 〃
// 指定した値に一致するclassを持つ要素を取得
const p_fuga_gemb1 = document.getElementsByClassName('fuga'); // 取得したい要素のclassを入力
const p_fuga_qs1 = document.querySlectorAll('.fuga'); // セレクターの指定はCSSと同じ
const p_fuga_jq1 = $(".fuga") // 〃
// classを指定するのは同じだが挙動が違う
const p_fuga_qs2 = document.querySlector('.fuga'); // 指定したclassを持つ最初の要素だけ取
document.getElementBy~は取得したい要素によって~の部分が以下のように変わる
| 指定したい対象 | 記述 |
|---|---|
| idを指定する場合 | Id |
| タグを直接指定する場合 | TagName |
| classを指定する場合 | ClassName |
それぞれの使い道
今回のようにquerySelectotとgetElementBy~であれば前者の方が使い勝手良さそうではあるものの、それぞれ特徴がある。
まず一番わかりやすい特徴として、取得される要素の形式(返り値)が違う
| 記述 | 取得される要素の形式 |
|---|---|
| getElementById or querySelector | element |
| getElementsBy~ | HTMLCollection |
| querySelectorAll | NodeList |
それぞれ簡単に説明すると
element
指定したセレクターに一致したHTML要素。
指定した要素が存在しない場合はnullが返る。
HTMLCollection
指定したセレクターに一致した要素が集合した、【配列風】なオブジェクト。
HTMLCollectionは【生きた要素】で、元になった要素へ変更があった場合、自動で変更が入る。
配列として利用するにはArray.fromなどを使用する必要がある。
NodeList
ノード(node)の集合。
配列ではないが、forEachメソッドで反復処理を実行することは可能。
querySelectorで取得した場合は静的な要素になるが、Node.ChildNodesなどで取得すると生きた要素になる
- node
- DOMの基本的な構成要素 jsでHTMLをプログラムで操作する基本単位
- elementはnodeの一種で基本的に要素(タグ)を表す
jQuery・JavaScriptそれぞれの書き換えに関するイメージ
扱う要素の数やその後の処理によって変わりますが、個人的にはjQueryからJavaScriptに書き換えるとき、苦にせず入りやすいのはquerySelectorな気がする。