概要: このチュートリアルでは、JavaScriptのquerySelector()とquerySelectorAll()を使って、CSSセレクターに基づいて要素を検索する方法を学びます。
JavaScript querySelector() および querySelectorAll() メソッドの紹介
querySelector()はElementインターフェースのメソッドです。querySelector()メソッドを使用すると、1つ以上のCSSセレクターに一致する最初の要素を選択できます。
以下は、querySelector()メソッドの構文を示しています。
let element = parentNode.querySelector(selector);Code language: JavaScript (javascript)この構文では、selectorは、parentNodeの子孫要素に一致させるためのCSSセレクター、またはCSSセレクターのグループです。
selectorが有効なCSS構文でない場合、このメソッドはSyntaxError例外を発生させます。
CSSセレクターに一致する要素がない場合、querySelector()はnullを返します。
querySelector()メソッドは、documentオブジェクトまたは任意のElementオブジェクトで使用できます。
querySelector()に加えて、querySelectorAll()メソッドを使用して、CSSセレクターまたはCSSセレクターのグループに一致するすべての要素を選択できます。
let elementList = parentNode.querySelectorAll(selector);Code language: JavaScript (javascript)querySelectorAll()メソッドは、CSSセレクターに一致する要素の静的なNodeListを返します。一致する要素がない場合は、空のNodeListを返します。
NodeListは配列のようなオブジェクトであり、配列オブジェクトではないことに注意してください。ただし、最近のWebブラウザでは、forEach()メソッドまたはfor...ofループを使用できます。
NodeListを配列に変換するには、次のようにArray.from()メソッドを使用します。
let nodeList = document.querySelectorAll(selector);
let elements = Array.from(nodeList);Code language: JavaScript (javascript)基本的なセレクター
次のHTMLドキュメントがあると仮定します。
<!DOCTYPE html>
<html lang="en">
<head>
<title>querySelector() Demo</title>
</head>
<body>
<header>
<div id="logo">
<img src="img/logo.jpg" alt="Logo" id="logo">
</div>
<nav class="primary-nav">
<ul>
<li class="menu-item current"><a href="#home">Home</a></li>
<li class="menu-item"><a href="#services">Services</a></li>
<li class="menu-item"><a href="#about">About</a></li>
<li class="menu-item"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to the JS Dev Agency</h1>
<div class="container">
<section class="section-a">
<h2>UI/UX</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas
laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima.
Adipisci, obcaecati repellat.</p>
<button>Read More</button>
</section>
<section class="section-b">
<h2>PWA Development</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam
commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure
provident labore nihil in earum.</p>
<button>Read More</button>
</section>
<section class="section-c">
<h2>Mobile App Dev</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea!
Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit
laborum debitis eos?</p>
<button>Read More</button>
</section>
</div>
</main>
<script src="js/main.js"></script>
</body>
</html>Code language: HTML, XML (xml)1) ユニバーサルセレクター
ユニバーサルセレクターは*で表され、すべてのタイプの要素に一致します。
*次の例では、querySelector()を使用してドキュメント内の最初の要素を選択します。
let element = document.querySelector('*');Code language: JavaScript (javascript)そして、これはドキュメント内のすべての要素を選択します。
let elements = document.querySelectorAll('*');Code language: JavaScript (javascript)2) タイプセレクター
ノード名で要素を選択するには、タイプセレクターを使用します。たとえば、aはすべての<a>要素を選択します。
elementName次の例では、ドキュメント内の最初のh1要素を検索します。
let firstHeading = document.querySelector('h1');Code language: JavaScript (javascript)次の例では、すべてのh2要素を検索します。
let heading2 = document.querySelectorAll('h2');Code language: JavaScript (javascript)3) クラスセレクター
特定のCSSクラスを持つ要素を検索するには、クラスセレクター構文を使用します。
.classNameCode language: CSS (css)次の例では、menu-itemクラスを持つ最初の要素を検索します。
let note = document.querySelector('.menu-item');Code language: JavaScript (javascript)次の例では、menuクラスを持つすべての要素を検索します。
let notes = document.querySelectorAll('.menu-item');Code language: JavaScript (javascript)4) IDセレクター
idの値に基づいて要素を選択するには、idセレクター構文を使用します。
#idCode language: CSS (css)次の例では、idが#logoの最初の要素を検索します。
let logo = document.querySelector('#logo');Code language: JavaScript (javascript)idはドキュメント内で一意である必要があるため、querySelectorAll()は適切ではありません。
5) 属性セレクター
特定の属性を持つすべての要素を選択するには、次の属性セレクター構文のいずれかを使用します。
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]
Code language: JSON / JSON with Comments (json)次の例では、任意の値を持つ属性[autoplay]を持つ最初の要素を検索します。
let autoplay = document.querySelector('[autoplay]');Code language: JavaScript (javascript)次の例では、任意の値を持つ[autoplay]属性を持つすべての要素を検索します。
let autoplays = document.querySelectorAll('[autoplay]');Code language: JavaScript (javascript)セレクターのグループ化
複数のセレクターをグループ化するには、次の構文を使用します。
selector, selector, ...セレクターリストは、グループ内のセレクターのいずれかに一致するすべての要素に一致します。
次の例では、すべての<div>要素と<p>要素を検索します。
let elements = document.querySelectorAll('div, p');Code language: JavaScript (javascript)結合子
1) 子孫結合子
ノードの子孫を検索するには、スペース( )の子孫結合子構文を使用します。
selector selectorたとえば、p aは、p要素内のすべての<a>要素に一致します。
let links = document.querySelector('p a');Code language: JavaScript (javascript)2) 子結合子
>の子結合子は、最初の要素の直接の子であるすべての要素を検索します。
selector > selector次の例では、<ul>要素の直下にあるすべてのli要素を検索します。
let listItems = document.querySelectorAll('ul > li');Code language: JavaScript (javascript)navクラスを持つ<ul>要素の直下にあるすべてのli要素を選択するには
let listItems = document.querySelectorAll('ul.nav > li');Code language: JavaScript (javascript)3) 一般兄弟結合子
~結合子は、同じ親を共有する兄弟を選択します。
selector ~ selectorたとえば、p ~ aは、p要素の後に続くすべての<a>要素に、直接的かどうかにかかわらず、一致します。
let links = document.querySelectorAll('p ~ a');Code language: JavaScript (javascript)4) 隣接兄弟結合子
+の隣接兄弟結合子は、隣接する兄弟を選択します。
selector + selectorたとえば、h1 + aは、h1の直後に続くすべての要素に一致します。
let links = document.querySelectorAll('h1 + a');Code language: JavaScript (javascript)h1の直後に続く最初の<a>を選択します。
let links = document.querySelector('h1 + a');Code language: JavaScript (javascript)疑似
1) 疑似クラス
:疑似クラスは、要素の状態に基づいて要素を一致させます。
element:stateCode language: CSS (css)たとえば、li:nth-child(2)はリスト内の2番目の<li>要素を選択します。
let listItem = document.querySelectorAll('li:nth-child(2)');Code language: JavaScript (javascript)2) 疑似要素
::はドキュメントに含まれていないエンティティを表すため、querySelector()メソッドは疑似要素を選択できません。
概要
querySelector()は、CSSセレクターまたはCSSセレクターのグループに一致する最初の要素を検索します。querySelectorAll()は、CSSセレクターまたはCSSセレクターのグループに一致するすべての要素を検索します。- CSSセレクターは、CSSルールが適用される要素を定義します。
