jQueryを使わずにHTML上の値を操作する方法
私がJavaScriptを学んだときは、HTML上の値を取得するときはgetElementByIdなどを使っていました。
jQueryを使うとCSSと同じセレクタが扱えるようになりました。
そして今はjQueryを使わずにセレクタが扱えます。
今回はJavaScriptでjQueryを使わずにHTML上の値を取得、設定する方法をまとめます。
目次
querySelectorで一つ取得
jQueryの便利な点の一つはオブジェクトを指定する際にCSSのセレクタが使えたことですが、querySelectorを使うと同様にCSSのセレクタが使えます。
idであれば#idとするとオブジェクトを特定できます。
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で対象を一つずつ処理できます。
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を使うとよいです。
ラジオ
console.log(part.value);
チェックボックス
parts.forEach(function(part){
console.log(part.value);
})
値の取得（ゲット）
値の取得方法はタグによって異なります。
HTMLが使える箇所はinnerText、それ以外はvalueでよさそうです。
div : innerText
input : value
textarea : value
値の設定（セット）
値のセットは値の取得と同じです。
テキストでなくHTMLをセットする場合はinnerHTMLとします。HTMLはすべて大文字であることに注意してください。
document.querySelector("#two").innerHTML="<a href=''>にばんめ</a>";
document.querySelector("#three").value="さんばんめ";
document.querySelector("#four").value="よばんめ";
[ 2024年2月3日 | カテゴリー: JavaScript | タグ: querySelector ]
« 将棋の駒の配置を描画する「将棋盤面メーカー」 | Pythonで線形探索と二分探索 »
コメントを残す