脱jQuery $(”.class”) $(”a”) $(”.class1, .class2”)

脱jQuery その2です。

今回は「複数ある」場合の $() の書き換えになります。JavaScript では「1つしかない」と「複数ある」は操作がだいぶ違います。

詳しくは、脱jQuery その1の記事を御覧ください。簡単な注意事項等書いています。

without-jquery

$(".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 でまとめて書く事ができる、こういうイメージです。これをまとめたものが上述の コードです。

まとめ

jQueryJavaScript
$(".A")document.getElementsByClassName("A")
$("div")document.getElementsByTagName("div")
$(".A, .B")document.querySelectorAll(".A, .B")
Top