脱jQuery $(”.class”) $(”a”) $(”.class1, .class2”)
脱jQuery その2です。
今回は「複数ある」場合の $() の書き換えになります。JavaScript では「1つしかない」と「複数ある」は操作がだいぶ違います。
詳しくは、脱jQuery その1の記事を御覧ください。簡単な注意事項等書いています。$(".class")
HTML
<div class="class">こんにちは</div>
<div class="class">こんにちは</div>
これらの .class の ”こんにちは” の文章を ”こんばんは” に入れ替えます。
jQuery
$(".class").html("こんばんは");
書き換え JavaScript
var myClass = document.getElementsByClassName("class");
for (var i = 0; i < myClass.length; i++) {
myClass[i].innerHTML = "こんばんは";
}
一気に前回の id の話に比べて複雑になりました。id との違い class は通常「複数ある」ということです。
jQuery の場合は1個だけしかなかろうが、複数あろうが全て自動でやってくれますが、JavaScript にはそれが出来ません。class のように複数ある場合は for という命令を使って要素を総当りさせます。for は繰り返す(ループ)の命令です。
for の詳しい話は下の方に詳しく書きました。今の時点では要素の「総当り」の命令ぐらいに思っていてください。「複数ある」もの全てに同じ命令(ここでは .html() )を適用させるために for で総当りさせるというイメージです。
jQuery の .each() と似ています。
参考:for について
命令に関して今回は .innerHTML という .html() のネイティブ版を使っています。詳しくは次回の記事を参考にしてください。命令の部分を書き換えることで、いろんなことが出来るイメージを持っていてください。
また id のときも書きましたが jQuery の場合は class 名を表す「.」が入りますが、JavaScript の場合は同じく「.」は入りません。注意しましょう。
id の場合は getElementById でしたが、今回は class なので getElementsByClassName です。class は複数あるので「複数形の s」が必要です。このへんかなり厳密です。最初はよくこの s が抜けて動かないというのが良くありました。
変数について
var ■ = document.getElementsByClassName("class"); //この部分で「.class」を指定
for (var i = 0; i < ■.length; i++) { //「for」で総当り
■[i].命令
}
■ には「変数」と言われる文字列を入れます。この変数の文字列は何でもよく、自分で決めることが出来ます。■ の部分を全て同じにすればなんでも構いませんが、基本同じものは1回しか使えないと思っていてください。「書き換え JavaScript」では”myClass”という変数名を使っています。
$("a")
次は $("a") の書き換え。a タグの中身を”リンク”から”りんく”に書き換えます。
HTML
<a href="#">リンク</a>
jQuery
$("a").html("りんく")
書き換え JavaScript
var myTag = document.getElementsByTagName("a");
for (var i = 0; i < myTag.length; i++) {
myTag[i].innerHTML = "りんく";
}
class の時とほとんどど変わりません。今回はタグを取るので、getElementsByTagName と「Tag」になってます。「複数形の s」も入ってます。
タグは複数あるので class の時と同じく for で要素を総当りします。変数名は今回「myTag」にしましたが、これも同じくなんでも構いません。
$(".class1, .class2")
.class1 と .class2 の中身を全て”おはよう”に書き換えます。
HTML
<div class="class1">こんにちは</div>
<div class="class2">こんばんは</div>
jQuery
$(".class1, .class2").html("おはよう");
書き換え JavaScript
var myClass = document.querySelectorAll(".class1, .class2");
for (var i = 0; i < myClass.length; i++) {
myClass[i].innerHTML = "おはよう";
}
$("") の中身が「クラス名2種類」です。こういう場合は querySelectorAll を使います。この命令は今までの2つと違い中身をまるで jQuery のように「.class1 .class2」と「.」付きで書きます。
例えば 中身は class に限らず$("#main .nav div")であれば querySelectorAll("#main .nav div") と jQuery と全く同じ形で書くことが出来ます。
ただし、class 1種類を指定したり tag 1種類を指定する場合は、基本的にはこれを使わず上記の getElementsByClassName や getElementsByTagName を使いましょう。パフォーマンスが全く異なります。
for の書き方も全く同じです。今回は変数名は myClass です。同様になんでも構いません。
forについて
「for」は繰り返しの命令です。
その中でいくつか jQuery には出てこない記述がありますので説明します。
forの基本
for (繰り返し条件) {
//繰り返す内容
}
と for のあとの {} で囲んだ部分を繰り返します。
「繰り返し条件」の部分を見てみます。繰り返し条件の中身は3つに別れます。
for(ループ変数の初期条件; 条件式; 更新式)
よくある for の式を例として書いてみます。
for (var i = 0; i < 10; i++) {
//繰り返す内容
}
まず「ループ変数の初期条件」。「i」という変数を使って「0」からスタートさせます。
「更新式」の「i++」というのは「i を1つづつ増やす」という命令です。i は 0 スタートでその次は「1」、その次は「2」というように増やしていきます。
「条件式」と言うのは「どこまでそのループをするか」です。今回の場合「i < 10」なので「i が 10 より小さい時」です。
i は 0 からスタートして「0」「1」「2」・・・と増えていきます。条件式が「10 より小さい時」なので最後は「9」で止まります。
つまり、このループは「10回」ループされます。
ポイントは「0」スタートだということです。「0~9」までなので10回のループになります。「1~10」で10回のループのほうが分かりやすいのですが JavaScript は基本「0スタート」です。0スタートにしたほうが都合がいいことが多いです。
var myClass = document.getElementsByClassName("class");
for (var i = 0; i < myCclass.length; i++) {
myClass[i].innerHTML = "こんばんは";
}
前述のこのコードを見てみます。
「ループ変数の初期条件」は0スタートです。
「更新式」は「1つづつ増やす」です。
「条件式」の「i < myClass.length」は「i が myClass.length より小さい時」です。myClass.length というのは「myClass の個数」を表します。.length が個数という意味。
myClass は「<div class="class">こんにちは</div>」を表しますので、つまりこれの個数を表します。
class="class"が全部で3つあれば「i が3より小さい時」、全部で10個あれば「i が10より小さい時」となります。0スタートですので class="class"が3つあれば「3回ループ」、10個あれば「10回ループ」です。
myClass[i] の部分にある [] はjQuery でいう .eq(i) と意味合いが似ています。i は 繰り返し条件の i と同じで i が0の時は myClass[0]、1の時は myClass[1] とこちらも変化していきます。
例えば「<div class="class">こんにちは</div>」と class="class" のものが4つ存在したとします。その場合 for を使わずに書くと
var myClass = document.getElementsByClassName("class");
myClass[0].innerHTML = "こんばんは"; // $(".class").eq(0) と同様の意味
myClass[1].innerHTML = "こんばんは"; // $(".class").eq(1) と同様の意味
myClass[2].innerHTML = "こんばんは"; // $(".class").eq(2) と同様の意味
myClass[3].innerHTML = "こんばんは"; // $(".class").eq(3) と同様の意味
4つなので「0~3」を書きます。.eq() も0が一番最初だったように [] も0が一番最初です。
1つづつ書くのが大変なので for でまとめて書く事ができる、こういうイメージです。これをまとめたものが上述の コードです。
まとめ
jQuery | JavaScript |
---|---|
$(".A") | document.getElementsByClassName("A") |
$("div") | document.getElementsByTagName("div") |
$(".A, .B") | document.querySelectorAll(".A, .B") |