24.
クエリセレクタ
querySelector()
querySelecter() は 「セレクタ」という記述で HTML から Element オブジェクトを取得します。
document.querySelector(セレクタ)
セレクタ指定
querySelector() の引数にセレクタを指定して、Element を選択します。
タグ
document.querySelector('タグ名')
クラス
document.querySelector('.クラス名')
ID
document.querySelector('#ID名')
querySelectorの利用
タグ指定
querySelector() で タグ指定して Element を取得します。
query.html
<h1 id="title">都市</h1>
selector.js
var h1 = document.querySelector('h1');
console.log(h1);
h1 タグが取得できました。
結果
<h1 id="title">都市</h1>
ID指定
querySelector() で ID指定して Element を取得します。
query.html
<h1 id="title">都市</h1>
selector.js
var title = document.querySelector('#title');
console.log(title);
h1 タグが取得できました。
結果
<h1 id="title">都市</h1>
セレクタの組み合わせ
タグ名と IDを組み合わせて指定することもできます。
query.js
var title = document.querySelector('h1#title');
console.log(title)
h1 タグが取得できました。
結果
<h1 id="title">都市</h1>
クラス指定
querySelector() で クラス指定して Element を取得します。
<ul>
<li class="city">Tokyo</li>
<li class="city">Yokohama</li>
<li class="city">Osaka</li>
<li class="city">Nagoya</li>
<li class="city">Kobe</li>
</ul>
JS
var cities = document.querySelector('.city');
console.log(cities);
結果
console.log() で確認すると .city の li を1つだけ取得できました。
<li class="city">Tokyo</li>
querySelectorAll()
querySelectorAll()とは
すべての要素を取得するには querySelectorAll() を利用します。
document.querySelectorAll(セレクタ)
querySelectorAll()の利用
city クラスの要素をすべて取得してみましょう。
selector.js
var cities = document.querySelectorAll('.city');
console.log(cities);
liタグが５つの NodeList型のオブジェクトが取得できました。
結果
NodeList(5) [li.city, li.city, li.city, li.city, li.city]
forEachで繰り返し
NodeList型はforEachで繰り返し可能です。
selector.js
cities.forEach(function(city) {
console.log(city.innerHTML);
})
for ofで繰り返し
for of 文で繰り返しもできます。
selector.js
for (var city of cities) {
console.log(city.innerHTML);
}
結果
Tokyo
Yokohama
Osaka
Nagoya
Kobe
セレクタの指定方法
セレクタの指定は文字列を組み合わせることで、いろいろな要素を指定できます。
複数のセレクタ
複数の要素を指定するときは ,（カンマ） で区切ります。
要素1, 要素2, 要素3, ....
selector.html
<h2>メニュー</h2>
<h3>ドリンク</h3>
<h3>フード</h3>
HTML全体から h1、h2 タグを一度に取得します。
selector.js
var elements = document.querySelectorAll('h2, h3');
console.log(elements)
結果
NodeList(4) [h2, h3, h3]
親子セレクタ
> で親子要素のセレクタを指定します。
親要素 > 子要素
selector.html
<h2 id="menu">メニュー</h2>
<h3>ドリンク</h3>
<ul class="menus">
<li>コーヒー</li>
<li>紅茶</li>
<li>ほうじ茶</li>
</ul>
<h3>フード</h3>
<ul class="menus">
<li>カレー</li>
<li>ラーメン</li>
<li>焼きそば</li>
</ul>
selector.js
menus クラスの ul から、子要素 li を指定します。
var menus = document.querySelectorAll('ul.menus > li');
console.log(menus);
結果
NodeList(6) [li, li, li, li, li, li]
子孫のセレクタ
子孫のセレクタは、親要素と子孫要素を半角スペースで区切ります。子孫要素は親要素の中のすべての階層の HTMLタグが対象です。
親要素 子孫要素
HTMLを作成します。
selector.html
<div>
<p>
<span>メニュー</span>の一覧です。
</p>
</div>
selector.js
div タグから子孫要素 span を指定します。
var elements = document.querySelectorAll('div span');
console.log(elements);
結果
NodeList [span]
演習
練習1
セレクタを指定して「ショップ」の文字列を取得してみましょう。
<h2 id ="shop">ショップ</h2>
練習2
セレクタを指定して各国の文字列を表示してみましょう。
<ul class="countory_list">
<li>Japan</li>
<li>USA</li>
<li>France</li>
<li>China</li>
<li>Blazil</li>
</ul>