document.querySelectorで、任意の要素を取得する方法

やりたいこと

document.querySelectorで、任意の要素を取得したい

困っていること・知りたいこと

document.querySelectorは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返すとのことで、以下のコードの場合、ボタン1の直後のtextareaが選択されてしまいます。
以下のようなHTML構造で、ボタン2の直後のtextareaをdocument.querySelectorで指定する方法が知りたいです。

//html
<div class="sample-button1">ボタン1</div>
<textarea class="sampe-textarea">任意の文字</textarea>

<div class="sample-button2">ボタン2</div>
<textarea class="sampe-textarea">任意の文字</textarea>

//jquery
// sample-button2をクリックしたら、その直後の.sampe-textareaを取得したい
$('#body').on('click','.sample-button2',function(){
  var textarea = document.querySelector('.sampe-textarea'); //この書き方では1つ目のtextareaが指定されてしまう。本当は2つ目のtextareaを指定したい
  var sentence = textarea.value; //textarea内の全文字を取得
  alert(sentence); //textarea内の全文字をアラート表示させたい
});

試しに、上のコードの
var textarea = document.querySelector('.sampe-textarea');
の部分を、
var textarea = $(this).querySelector('.sampe-textarea');
としてみたり、ベテランの方がみたら笑ってしまうであろうコードをいろいろ試行錯誤してみましたが、エラーの連発でした。textareaごとにclass名を分ければよいのですが、$(this)を使ってどのうにかできないかなと奮闘しております。

上記のコードでいうところの、「ボタン2」の直後のtextareaをquerySelectorで選択する方法をご存じの方がおりましたら、どうかご教授いただければ幸いです。

何卒、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

NonDocumentTypeChildNode.nextElementSibling - Web APIs | MDN

HTML
1<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
2<div id="body">
3  <div class="sample-button1">ボタン1</div>
4  <textarea class="sampe-textarea">任意の文字</textarea>
5
6  <div class="sample-button2">ボタン2</div>
7  <textarea class="sampe-textarea">任意の文字</textarea>
8</div>
9<script>
10'use strict';
11$('#body').on('click','.sample-button2',event => console.log(event.currentTarget.nextElementSibling.value));
12</script>

Re: yayak さん

投稿2020/09/23 12:07

編集2020/09/23 12:10

think49

総合スコア18170

Zuishin

2020/09/23 12:12

> 上記のコードでいうところの、「ボタン2」の直後のtextareaをquerySelectorで選択する方法をご存じの方がおりましたら、どうかご教授いただければ幸いです。

yayak

2020/09/23 12:24

ご厚意感謝申し上げます。頂いたコードの内容を理解できるように、もっと勉強に励みます<(_ _)>

think49

2020/09/23 12:28

@yayak さん追加質問があれば、ある程度は(多すぎなければ)補足します。 jQuery APIなら、jQuery#next() を活用できる場面だと思います。 https://api.jquery.com/next/

yayak

2020/09/23 12:41

お優しいお言葉、心より感謝申し上げます。また、勉強するためのページまでご紹介いただき、有難うございます。たくさん勉強します！

行動規範の内容に同意します

ベストアンサー

隣接結合子(+)を使ってください。

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Document</title>
7</head>
8<body>
9	<div class="sample-button1">ボタン1</div>
10	<textarea class="sampe-textarea">任意の文字</textarea>
11
12	<div class="sample-button2">ボタン2</div>
13	<textarea class="sampe-textarea">任意の文字</textarea>
14
15	<script>
16		document.querySelector(".sample-button2 + .sampe-textarea").style.color = "red";
17	</script>
18</body>
19</html>

投稿2020/09/23 11:39

編集2020/09/23 12:39

Zuishin

総合スコア28662

yayak

2020/09/23 12:30 編集

頂いた隣接セレクタの書き方がやりたかったことが実現できました。本当に有難うございます。そして、これは新しく質問ページを建て直したほうが良いのか悩んだのですが、例えば document.querySelector("this + .sampe-textarea").style.color = "red"; のようなイメージで、thisを使った書き方ができるのかどうかや、 .sample-button2と.sampe-textareaの間に別の要素が挟まっていた場合、nextAll('〇〇:first')的な指定の書き方なども存在するかも知りたいと思っております。そういった書き方の勉強ができる場所を探しているのですが、なかなか見つからず、お恥ずかしい質問で申し訳ございません。 ※新しく質問ページを建て直したほうが良い場合は、そのようにいたします。重ねて、とても勉強になる回答、心より感謝申し上げます。

Zuishin

2020/09/23 12:38 編集

this は使えません。事情があってわかりやすいページを紹介できないんですが、querySelector の引数は css のセレクタなので、「css セレクタ」でググってみてください。別の要素が挟まっていた場合には、一般兄弟結合子でどうにかなりそうな気がします。

yayak

2020/09/23 12:42

そうだったのですね＞＜かしこまりました。cssセレクタの勉強もしてみます！わかりやすい回答、本当に有難うございます。

行動規範の内容に同意します

あなたの回答