querySelector | You Look Too Cool https://stabucky.com/wp ゆるくつくる stabuckyのブログ Sat, 01 Jun 2024 07:21:39 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://stabucky.com/wp/wp-content/uploads/2024/05/cropped-stabucky-32x32.png querySelector | You Look Too Cool https://stabucky.com/wp 32 32 jQueryを使わずにHTML上の値を操作する方法 – 脱jQuery https://stabucky.com/wp/archives/16439 https://stabucky.com/wp/archives/16439#respond Sat, 03 Feb 2024 01:30:51 +0000 https://stabucky.com/wp/?p=16439 私がJavaScriptを学んだときは、HTML上の値を取得するときはgetElementByIdなどを使っていました。
その後、jQueryが登場し、CSSと同じセレクタが扱えるようになりました。
そして今は、jQueryを使わずにセレクタが扱えます。
今回はJavaScriptでjQueryを使わずにHTML上の値を取得、設定する方法をまとめます。

querySelectorで一つ取得

jQueryの便利な点の一つはオブジェクトを指定する際にCSSのセレクタが使えたことですが、querySelectorを使うと同様にCSSのセレクタが使えます。
idであれば#idとするとオブジェクトを特定できます。

<input type="text" id="nezumi" value="ねずみ">
<textarea id="ushi">うし</textarea>
<div id="tora">とら</div>
part=document.querySelector("#nezumi");
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);
});

ラジオとチェックボックスで取得

radioとcheckboxはチェックがついているものを取得します。
多くの場合、name属性があるので[name=name]:checkedを使うとよいです。

ラジオ

<input type="radio" name="seiza" value="おうし">おうし
<input type="radio" name="seiza" value="さそり" checked>さそり
part=document.querySelector("[name=seiza]:checked");
console.log(part.value);

チェックボックス

<input type="checkbox" name="hoi" value="ひがし">ひがし
<input type="checkbox" name="hoi" value="にし" checked>にし
<input type="checkbox" name="hoi" value="みなみ">みなみ
<input type="checkbox" name="hoi" value="きた" checked>きた
parts=document.querySelectorAll("[name=hoi]:checked");
parts.forEach(function(part){
  console.log(part.value);
})

値の取得（ゲット）

値の取得方法はタグによって異なります。
HTMLが使える箇所はinnerText、それ以外はvalueでよさそうです。

input : value
textarea : value
div : innerText

値の設定（セット）

値のセットは値の取得と同じです。
テキストでなくHTMLをセットする場合はinnerHTMLとします（HTMLはすべて大文字）。

<div id="one"></div>
<div id="two"></div>
<input type="text" id="three" value="さんばんめ">
<textarea id="four" value="よんばんめ"></textarea>
document.querySelector("#one").innerText="いちばんめ";
document.querySelector("#two").innerHTML="<a href=''>にばんめ</a>";
document.querySelector("#three").value="さんばんめ";
document.querySelector("#four").value="よばんめ";

フォームのサンプル

<input type="text" id="txt_src" value="abcdefgh">
<button type="button" id="btn_doit">実行</button>
<input type="text" id="txt_dst">
<textarea id="ta_dst"></textarea>
<div id="div_dst"></div>
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;
}

]]> https://stabucky.com/wp/archives/16439/feed 0