脱jQuery .html() .text() .val()

.html()

前回の記事で少し使いましたが .html() の書き換えです。

id は「1つしか無い」、class は「複数ある」です。HTML上にその class が仮に1個しかなかったとしても「複数ある」として考えます。JavaScript では「1つしか無い」と「複数ある」は全く操作が違います。「複数ある」場合は for で総当りします。tag 名で取得したりする場合は前回の記事を参考にして書き換えてみてください。

for についての詳細は前回の記事を御覧ください。

参考：forについて

jQuery（id の場合）

$("#id").html("<span>テスト</span>");

書き換え JavaScript（id の場合）

document.getElementById("id").innerHTML = "<span>テスト</span>";

.html("○○") を .innerHTML = "○○" にすればOKです。jQueryの場合は()が必要ですが、JavaScript の場合は = "" になるということに注意してください。

jQuery（class の場合）

$(".class").html("<span>テスト</span>");

書き換え JavaScript（class の場合）

var myClass = document.getElementsByClassName("class");
for (var i = 0; i < myClass.length; i++) {
    myClass[i].innerHTML = "<span>テスト</span>";
}

前回と同じです。for を使って総当りするだけです。

.text()

続いて .text()。

jQuery（id の場合）

$("#id").text("テスト");

書き換え JavaScript（id の場合）

document.getElementById("id").textContent = "テスト";

.text("○○") を .textContent = "○○" にします。上は innerHTML なのに innerText じゃないのかよ、と思ってしまいますが、そういう命令もあります。しかし、「.innerText」は一部ブラウザが対応していないため全ブラウザが対応している .textContent を使います。

jQuery（class の場合）

$(".class").text("テスト");

書き換え JavaScript (class の場合)

var myClass = document.getElementsByClassName("class");
for (var i = 0; i < myClass.length; i++) {
    myClass[i].textContent = "テスト";
}

for で総当りします。

.val()

最後は val() 。フォーム要素の値を変更したり取得するものですね。

jQuery（id の場合）

$("#input").val("フォーム");

書き換え JavaScript（id の場合）

document.getElementById("input").value = "テスト";

.val("○○") を .value = "○○" と書き換えます。 val は value の略です。

jQuery (class の場合)

$(".input").val("フォーム");

書き換え JavaScript (class の場合)

var myClass = document.getElementsByClassName("input");
for (var i = 0; i < myClass.length; i++) {
    myClass[i].value = "フォーム";
}

上記2つと同じです。

以上が要素に設定する場合です。

要素から取得する場合

次は取得する場合です。jQuery の場合は .html() とカッコの中に何も入れないと「取得」になりますね。ネイティブの JavaScript でも同様です。

HTML

<div id="main">メイン</div>
<div class="nav">ナビ1</div>
<div class="nav">ナビ2</div>

jQuery（id の場合）

$("#main").html(); //「メイン」を取得

書き換え JavaScript （id の場合）

document.getElementById("main").innerHTML; //「メイン」を取得

「= "○○"」をとれば取得になります。続いて class の場合は2番目の要素を取得してみます。

jQuery（class の場合）

$(".nav").eq(1).html(); //「ナビ2」を取得

書き換え JavaScript（class の場合）

document.getElementsByClassName("nav")[1].innerHTML; //「ナビ2」を取得

jQuery の順番を指定する命令は .eq() ですが JavaScript の場合は [] を使います。番号付けは「0」から始まるので注意しましょう。[1]は2番目の要素です。jQuery と同じく「中身がなければ取得」というイメージです。

.text()、.val() まとめて書いてしまいます。

jQuery（id の場合）

$("#main").text();
$("#form").val()

書き換え JavaScript（id の場合）

document.getElementById("main").textContent;
document.getElementById("form").value;

class の時も .innerHTML と同様です。

jQuery（class の場合）

$(".class").eq(1).text();
$(".input").eq(1).val();

書き換え JavaScript（class の場合）

document.getElementsByClassName("class")[1].textContent;
document.getElementsByClassName("input")[1].value;

まとめ