▼はじめに
本記事では、JavaScriptのDOM操作において最初の処理である”要素取得”について、これだけ覚えておけば何とかなるであろうメソッドを紹介していきたいと思います。
というのも私自身が要素取得の方法を2種類しか使った事がないため、アウトプットも含めて記事を書かせていただきます。
▼目次
１．getElementById()メソッド
２．getElementsByClassName()メソッド
３．getElementsByTagName()メソッド
４．querySelector()メソッド
５．querySelectorAll()メソッド
１．getElementById()メソッド
特徴：特定のIDを持つ要素を取得する。
▼取得例
<body>
<div id="example"></div>
</body>
const example = document.getElementById('example');
console.log(example);
▼結果
ID”example”の要素を取得できました。
２．getElementsByClassName()メソッド
特徴：特定のクラス名を持つ全ての要素を取得する。
▼取得例
<body>
<div class="example"></div>
<p class="example"></p>
</body>
const example = document.getElementsByClassName('example');
console.log(example);
▼結果
クラス”example”の要素を全て取得できました。
注意！！
getElementsByClassName()メソッドで取得した要素は、HTMLCollectionという配列風の値で返ってきます。
要素に対して処理を行う場合、繰り返し処理をする必要があります。
▼応用：特定のクラス名（複数）の中から指定の要素を取得する
クラス名"example"のh3タグの要素を取得します。
<body>
<h1 class="example">example1</h1>
<h2 class="example">example2</h2>
<h3 class="example">example3</h3>
</body>
const example = document.getElementsByClassName('example')[2];
console.log(example);
▼結果
h3タグを取得できました。
▼解説
getElementsByClassName('example')の返り値はHTMLCollectionになります。
HTMLCollectionにはインデックスが振られているため、getElementsByClassName('example')[2]と指定した事で、3個目の要素が取得できました。
気づいている人もいると思いますが、指定して取得した要素はHTMLCollectionではありません。そのまま使う事ができます。
３．getElementsByTagName()メソッド
特徴：特定のタグ名を持つ全ての要素を取得する。
▼取得例
<body>
<h1>example1</h1>
<h2>example2</h2>
<h1>example3</h1>
<h2>example4</h2>
</body>
const example = document.getElementsByTagName('h1');
console.log(example);
▼結果
h1タグを全て取得できました。
getElementsByClassName()メソッド同様に返り値はHTMLCollectionになります。
４．querySelector()メソッド
特徴：指定したCSSセレクター又はCSSセレクター群にマッチする最初の要素を取得する。
▼CSSセレクターとは
セレクターは、 CSS でも JavaScript でも、 HTML 要素の型、属性、現在の状態、さらには DOM 内の位置に基づいてターゲットを絞ることができます。
引用：MDN
▼取得例
それではquerySelector()メソッドを使って要素を取得していきます。
もちろんclassやidを指定して取得することもできますが、querySelector()メソッドならではの指定方法で取得していきたいと思います。
▼複雑な指定＆属性セレクター
<body>
<div class="div-area1">
<button class="button" name="button1">ボタン１</button>
</div>
<div class="div-area1">
<button class="button" name="button1">ボタン２</button>
</div>
<div class="div-area2">
<button class="button" name="button2">ボタン３</button>
</div>
</body>
const example = document.querySelector("div.div-area1 button[name='button1']");
console.log(example);
▼結果
今回は、divタグ＆クラス名div-area1＆name属性button1を指定して要素を検索しています。
結果として、条件に一致する最初の要素を取得することができました。
５．querySelectorAll()メソッド
特徴：指定したCSSセレクターにマッチする全ての要素を取得する。
▼取得例
<body>
<button class="button1">ボタン１</button>
<button class="button2">ボタン２</button>
<button class="button3">ボタン３</button>
</body>
const example = document.querySelectorAll("button");
console.log(example);
▼結果
buttonタグを全て取得できました。
ここで分かるのが、返り値はNodeListという配列風になっています。
▼複数条件の場合
次に複数条件で要素を取得してみます。
<body>
<button class="button1">ボタン１</button>
<button class="button2">ボタン２</button>
<button class="button3">ボタン３</button>
</body>
const example = document.querySelectorAll("button.button1,button.button2");
console.log(example);
▼結果
今回はbuttonタグ＆クラス名button1もしくはbuttonタグ＆クラス名button2に一致する要素を検索しています。
結果として、一致する要素を全て取得できています。
Point！
NodeListにはforeachメソッドを使ってアクセスできます。HTMLCollectionと違い、配列に変換する必要はありません。
注意点として、静的NodeListはDOM構造が変化しても更新されません。静的NodeListを操作する場合はDOM構造が変化するかを考慮して記述する必要があります。
まとめ
| 名前 | 説明 |
|---|---|
| getElementById() | 特定のidを持つ要素を取得 |
| getElementsByClassName() | 特定のクラス名を持つ全ての要素を取得 |
| getElementsByTagName() | 特定のタグ名を持つ全ての要素を取得 |
| querySelector() | 指定したCSSセレクター又はCSSセレクター群にマッチする最初の要素を取得 |
| querySelectorAll() | 指定したCSSセレクターにマッチする全ての要素を取得 |
様々な方法で要素を取得する事ができましたね。実際は要素をどう操作するかで取得方法が変わってきますが、これらの方法を覚えておく事で出来ることはかなり広がります。
皆さんも実際に手を動かして是非チャレンジしてみてください！！