【JavaScript】要素を取得するメソッド一覧と使い方～id class タグ名 name属性～

JavaScript

HTMLで作成されたWebページで動的な処理を実装する際に必須のDomの操作

その中でも各要素の様々な取得方法についてご紹介していきます。

本記事ではHTML要素を取得するメソッドを5つ紹介していますが、特にquerySelectorとquerySelectorAllにスポットを当てて解説しています。

HTML要素を取得するメソッド一覧

JavaScriptでHTMLの要素を取得することができる主なメソッドは以下の5種類になります

メソッド用途
document.getElementById(‘id名’)id名で要素を取得する
document.getElementsByClassName(‘class名’)指定したclass名を持つすべての要素を取得する
document.getElementsByTagName(‘Tag名’)指定したTag名を持つすべての要素を取得する
document.querySelector(‘任意’)条件に一致する最初の要素を取得する
document.querySelectorAll(‘任意’)条件に一致するすべての要素を取得する

これだけ種類があるとどのメソッドを使用して要素を取得するのが良いのか迷ってしまいますよね？

なんとなくgetElement~を利用されている方もいるかもしれませんが

結論から言うと要素を取得するのに使用するのは以下の2種類のみで問題ありません

  • querySelector()
  • querySelectorAll()

その理由はこの2つのメソッドでid,class,name属性,タグのすべての要素を取得することができるからです。

ではなぜ他の取得方法が存在しているのか？

その理由は主に2つあります。

1つ目の理由はシンプルに古い記述方法だからです

JavaScriptも年々バージョンアップを重ねていくうちにそれまで使われてきた要素を取得するためのメソッドがたった2つに集約されました

それが前述のquerySelectorとquerySelectorAllです。

2つ目の理由はgetElement系のほうが処理速度としては優れている点にあります。

ページの表示速度の向上などブラウザ上でのパフォーマンスを優先するときにはgetElement系が利用されます。

ただし、通常のWebページレベルでは実感できるほどの差異はなく、一度に数百、数千といった要素の検索をするようなプログラムでない限りは影響はありません

また現行のシステムでは多少古いルールで記述されているシステムもあるため、個人開発や新規の開発でない場合はプロジェクトのコーディングルールを確認してどちらを利用するのか確認しておきましょう。

まとめ
  • 要素の取得に使用するのは基本的にquerySelector(querySelectorAll)メソッド
  • 特別な理由がなければgetElement系のメソッドは使用しない

querySelector(querySelectorAll)で要素を取得する

それでは、実際にquerySelector(querySelectorAll)メソッドを使用して要素を取得する方法についてご紹介していきます。

サンプルとして利用するHTMLは以下の通りです。

<body>
    <h1 id="sampleId">サンプルタイトル</h1>
    <p>Pタグのテキスト1</p>
    <p>Pタグのテキスト2</p>
    <div class="sampleClass" name="sampleName">1個目</div>
    <div class="sampleClass">2個目</div>
    <div class="sampleClass" name="sampleName">3個目</div>
</body>

Id名を指定して要素を取得する

同一のidが付与された要素は基本的に存在しないため、利用できるメソッドはquerySelectorメソッドのみとなります。

サンプルコード

const idName = document.querySelector('#sampleId');
console.log(idName);

出力結果

<h1 id="sampleId">サンプルタイトル</h1>

Class名を指定して要素を取得する

同一のクラス名は複数指定することが可能なため、querySelectorとquerySelectorAll両方の記述方法と違いについて紹介していきます。

querySelector
指定したクラス名に一致する要素の中で一番最初に記述されているものを取得

サンプルコード

const className = document.querySelector('.sampleClass');
console.log(className);

出力結果

<div class="sampleClass">1個目</div>

sampleClassというクラスを持つ3つのdiv要素のうち一番上にある要素が取得できていることがわかります。

querySelectorAll
指定したクラス名に一致するすべての要素をNodeListと呼ばれる特殊な配列として取得

サンプルコード

const classNameList = document.querySelectorAll('.sampleClass');
console.log(classNameList);

出力結果

NodeList(3) [div.sampleClass, div.sampleClass, div.sampleClass]
0: div.sampleClass
1: div.sampleClass
2: div.sampleClass
length: 3

sampleClassを持つ3つのdiv要素をすべてがNodeListという配列として取得されていることがわかります。

タグ名を指定して要素を取得する

同一のタグは1つのWebページに複数利用されることはよくあるためquerySelectorとquerySelectorAll両方の記述方法と違いについて紹介していきます。

querySelector
指定したタグ名に一致する要素の中で一番最初に記述されているものを取得

サンプルコード

const tagName = document.querySelector('p');
console.log(tagName);

出力結果

<p>Pタグのテキスト1</p>

サンプルのHTMLに定義されているpタグのうち最初に定義されているpタグが取得できています。

querySelectorAll
指定したタグ名に一致するすべての要素をNodeListと呼ばれる特殊な配列として取得

サンプルコード

const tagNameList = document.querySelectorAll('p');
console.log(tagNameList);

出力結果

NodeList(2) [p, p]
0: p
1: p
length: 2

今回のサンプルではpタグは2つ定義されているため、その2つをNodeListの配列として取得していることがわかります。

Name属性を指定して要素を取得する

同一のname属性は複数の指定が可能です。そのためquerySelectorとquerySelectorAll両方の記述方法と違いについて紹介していきます。

querySelector
指定したname属性に一致する要素の中で一番最初に記述されているものを取得

サンプルコード

const name = document.querySelector('[name="sampleName"]');
console.log(name);

出力結果

<div class="sampleClass" name="sampleName">1個目</div>

サンプルHTMLに定義されているname属性(sampleName)が付与されているdivタグ2つのうち最初に定義されているdivタグが取得できています。

querySelectorAll
指定したname属性に一致するすべての要素をNodeListと呼ばれる特殊な配列として取得

サンプルコード

const nameList = document.querySelectorAll('[name="sampleName"]');
console.log(nameList);

出力結果

NodeList(2) [div.sampleClass, div.sampleClass]
0: div.sampleClass
1: div.sampleClass
length: 2

今回のサンプルではsampleNameというname属性が定義されているタグはdivタグ2つです。

そのため、2つのdivタグが配列として取得できています。

タイトルとURLをコピーしました