要素の取得
HTMLの要素を取得する方法として、今回は qerySelector
というメソッドを使っていきます。
querySelector
ではCSSのセレクタを使って操作していきます。
「セレクタ」と聞いてすぐにイメージできますか?
簡単に復習ですが、次の例だとCSSを書いた時の「body」に当たる部分がセレクタになります。
基本的な考え方は、前回の document.getElementById
で行ったように JavaScript側からHTMLの要素を指定する という内容と同じです。
document.querySelector
【クラス名を使って取得する場合】
次のようなHMTLがあったとします。
<!-- index.html -->
<body>
<div class="box">BOX1</div>
<div class="box">BOX2</div>
<div id="box">BOX3</div>
<script src="js/main.js"></script>
</body>
document.querySelector(.クラス名)
を使用して取得します。
// main.js
let box = document.querySelector('.box');
console.log(box);
【idを使って取得する場合】
<!-- index.html -->
<body>
<div class="box">BOX1</div>
<div class="box">BOX2</div>
<div id="box">BOX3</div>
<script src="js/main.js"></script>
</body>
document.querySelector('#id')
を使用します。
// main.js
let box = document.querySelector('#box');
console.log(box);
document.querySelectorAll
先ほどまでの document.querySelector
では、HTMLを上から順に見ていき、最初に見つかった一つだけを取得できます。
同じクラス名や、divタグなど 複数を選択したい 場合は document.querySelectorAll
と書きます。
<!-- index.html -->
<body>
<div class="box">BOX1</div>
<div class="box">BOX2</div>
<div id="box">BOX3</div>
<script src="js/main.js"></script>
</body>
※for文を使っているのは、複数の要素をconsole.logで確認のためです。
class名がboxの要素を取得してみます。
// main.js
let boxClass = document.querySelectorAll('.box');
for (let i = 0; i < boxClass.length; i++) {
console.log(boxClass[i]);
}
まとめ
document.querySelector(‘’); ➡︎最初に出てきた1件だけ取得
document.querySelectorAll(‘’); ➡︎全件取得
何から取得するか | 書き方 | 注意点 |
---|---|---|
id | document.querySelector(‘#id名’) | id名の前に「 # 」をつける |
class | document.querySelector(‘.クラス名’) | クラス名の前に「 . 」をつける |
〇〇の直接の子要素△△を全て | document.querySelectorAll(‘〇〇 > △△’) | 〇〇を「親」つまり△△より大きいと考える |
input要素のtype属性が〇〇を全て | document.querySelectorAll(‘input[type=〇〇]’) |
ちなみに、以下は同じ結果になります。
document.getElementsByClassName('クラス名')
と document.querySelectorAll(‘.クラス名’)
document.getElementById('id名')
と document.querySelector(‘#id名’)
以下、プラスアルファの知識
例えば以下のような場合です。
・formタグの中にあるinputタグ全て
・input要素のtype属性がradioの要素を全て
<formタグの中にあるクラス名がboxのもの全て>
「 formタグの中にあるクラス名がboxのもの全て 」を「 formタグの直接の子要素であるクラス名がboxのものを全て 」と読み替えて考えてみてください。
//以下のように書き表します
let elems = document.querySelectorAll('form > .box');
<!-- index.html -->
<body>
<div class="box">BOX1</div>
<form action="">
<div class="box">BOX2</div>
<div class="box">BOX3</div>
名前:<input type="text" name="name"> <br>
年齢:
<input type="radio" name="age" value="20"> 20歳以上
<input type="radio" name="age" value="30"> 30歳以上
<input type="radio" name="age" value="40"> 40歳以上 <br>
性別:
<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女"> 女
</form>
<script src="js/main.js"></script>
</body>
// main.js
let elems = document.querySelectorAll('form > .box');
for (let i = 0; i < elems.length; i++) {
console.log(elems[i]);
}
<input要素のtype属性がradioの要素を全て>
//以下のように書き表します
let elems = document.querySelectorAll('input[type=radio]');
<!-- index.html -->
<body>
<form action="">
名前:<input type="text" name="name"> <br>
年齢:
<input type="radio" name="age" value="20""> 20歳以上
<input type="radio" name="age" value="30"> 30歳以上
<input type="radio" name="age" value="40"> 40歳以上 <br>
性別:
<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女"> 女
</form>
<script src="js/main.js"></script>
</body>
// main.js
let elems = document.querySelectorAll('input[type=radio]');
for (let i = 0; i < elems.length; i++) {
console.log(elems[i]);
}
課題
理解度チェック
JavaScript→2-2というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。
(この問題は、ファイルを一つにするために、HTMLの中でCSSとJavaScriptを読み込む書き方をしています。以下のコードをコピーして問題を解いてください。)
問1:テキストの表示非表示を切り替えるボタンを作成してください。(getElementByIdとquerySelectorのどちらを使用しても大丈夫です)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="ボタン" onClick="changeBtn()">
<p id="p1">ボタンが押されると表示非表示が切り替わります。</p>
<script>
function changeBtn() {
// ①id「p1」の要素を取得
// ②取得したp1に「display:none」が無かったら、「display:none」を付与する。
// 取得したp1に「display:none」があったら、「display:block」を付与する。
}
</script>
</body>
</html>
【ヒント】
クリックされたら、用意しておいた関数を実行させる方法は、一つ前の 2.要素の取得 document.getElement…で、実は似たようなことを行っています。
参考にしてみてください。