私がJavaScriptを学んだときは、HTML上の値を取得するときはgetElementByIdなどを使っていました。
その後、jQueryが登場し、CSSと同じセレクタが扱えるようになりました。
そして今は、jQueryを使わずにセレクタが扱えます。
今回はJavaScriptでjQueryを使わずにHTML上の値を取得、設定する方法をまとめます。
querySelectorで一つ取得
jQueryの便利な点の一つはオブジェクトを指定する際にCSSのセレクタが使えたことですが、querySelectorを使うと同様にCSSのセレクタが使えます。
idであれば#idとするとオブジェクトを特定できます。
part=document.querySelector("#nezumi");
console.log(part.value);
part=document.querySelector("#ushi");
console.log(part.value);
part=document.querySelector("#tora");
console.log(part.innerText);
console.log(part.value);
part=document.querySelector("#ushi");
console.log(part.value);
part=document.querySelector("#tora");
console.log(part.innerText);
querySelectorAllで全て取得
#idであれば対象は一つだけですが tagや.classだと複数になります。
querySelectorだと先頭の一つが取得できます。
querySelectorAllにすると対象全てが取得できます。
複数取得した場合はforEachで対象を一つずつ処理できます。
//querySelectorだと、対象が複数ある場合、先頭のみ取得。
part=document.querySelector("div");
console.log(part.innerText);
//querySelectorAllだと、全て取得される。
parts=document.querySelectorAll("div");
parts.forEach(function(part){
console.log(part.innerText);
});
part=document.querySelector("div");
console.log(part.innerText);
//querySelectorAllだと、全て取得される。
parts=document.querySelectorAll("div");
parts.forEach(function(part){
console.log(part.innerText);
});
ラジオとチェックボックスで取得
radioとcheckboxはチェックがついているものを取得します。
多くの場合、name属性があるので[name=name]:checkedを使うとよいです。
ラジオ
part=document.querySelector("[name=seiza]:checked");
console.log(part.value);
console.log(part.value);
チェックボックス
parts=document.querySelectorAll("[name=hoi]:checked");
parts.forEach(function(part){
console.log(part.value);
})
parts.forEach(function(part){
console.log(part.value);
})
値の取得（ゲット）
値の取得方法はタグによって異なります。
HTMLが使える箇所はinnerText、それ以外はvalueでよさそうです。
input : value
textarea : value
div : innerText
値の設定（セット）
値のセットは値の取得と同じです。
テキストでなくHTMLをセットする場合はinnerHTMLとします（HTMLはすべて大文字）。
document.querySelector("#one").innerText="いちばんめ";
document.querySelector("#two").innerHTML="<a href=''>にばんめ</a>";
document.querySelector("#three").value="さんばんめ";
document.querySelector("#four").value="よばんめ";
document.querySelector("#two").innerHTML="<a href=''>にばんめ</a>";
document.querySelector("#three").value="さんばんめ";
document.querySelector("#four").value="よばんめ";
フォームのサンプル
document.querySelector("#btn_doit").onclick = function(){
text = document.querySelector("#txt_src").value;
document.querySelector("#txt_dst").value = text;
document.querySelector("#ta_dst").value = text;
document.querySelector("#div_dst").innerText = text;
}
text = document.querySelector("#txt_src").value;
document.querySelector("#txt_dst").value = text;
document.querySelector("#ta_dst").value = text;
document.querySelector("#div_dst").innerText = text;
}
コメント