JavaScript: getElementById vs querySelector - 徹底比較
2024-06-29
JavaScript で要素を取得する: querySelector vs getElementById
JavaScript で DOM 要素を取得するには、様々な方法があります。その中でもよく使われるのが getElementById と querySelector です。どちらも要素を取得するメソッドですが、それぞれ異なる特徴と用途があります。
getElementById
- 特定の ID を持つ要素を 1つだけ 取得します。
- ID はユニークである必要があるため、確実に目的の要素を取得できる という利点があります。
- 処理速度が速いという特徴もあります。
querySelector
- CSS セレクターを使って、1つだけ または 複数 の要素を取得します。
- ID 以外にも、クラス名、属性、要素名など、様々な条件で要素を絞り込むことができます。
- 汎用性が高く、柔軟な要素取得が可能です。
使い分け
- ID が分かっている場合は、
getElementByIdを使うのが一般的です。 - ID が分からない 場合や、より柔軟な要素取得 が必要な場合は、
querySelectorを使います。
jQuery
- jQuery は JavaScript ライブラリであり、DOM 操作をより簡単に記述することができます。
getElementByIdとquerySelectorに相当するメソッドとして、$("#id")と$(selector)が用意されています。- jQuery を使うことで、コードがより簡潔になり、読みやすくなります。
例
// getElementById を使って要素を取得
const element1 = document.getElementById("my-id");
// querySelector を使って要素を取得
const element2 = document.querySelector("#my-id");
// jQuery を使って要素を取得
const element3 = $("#my-id");
DOM
- DOM (Document Object Model) は、HTML ドキュメントをツリー構造で表現したものです。
getElementByIdとquerySelectorは、DOM を操作するためのメソッドです。- これらのメソッドを使って、要素を追加・削除・変更したり、イベントを登録したりすることができます。
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<p id="my-id">This is a paragraph.</p>
<script>
const element = document.getElementById("my-id");
console.log(element); // <p id="my-id">This is a paragraph.</p>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>querySelector Example</title>
</head>
<body>
<p id="my-id">This is a paragraph.</p>
<script>
const element = document.querySelector("#my-id");
console.log(element); // <p id="my-id">This is a paragraph.</p>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="my-id">This is a paragraph.</p>
<script>
const element = $("#my-id");
console.log(element); // <p id="my-id">This is a paragraph.</p>
</script>
</body>
</html>
説明
- 上記のコードは、それぞれ
getElementById、querySelector、jQuery を使って要素を取得する例です。 - 各コードで取得した要素は、コンソールにログ出力されています。
- 3つのコードとも、同じ要素を取得していることが確認できます。
補足
- 実際の開発では、より複雑なセレクターを使って要素を取得することもあります。
- jQuery を使う場合は、CDN からライブラリをロードする必要があります。
JavaScript で要素を取得する: その他の方法
getElementsByTagName
- タグ名を使って、そのタグ名を持つすべての要素 を取得します。
- 複数の要素を取得したい場合に便利です。
- ただし、ID やクラス名で絞り込みできないため、目的の要素を取得できない 場合もあります。
const elements = document.getElementsByTagName("p");
console.log(elements); // <p id="my-id">This is a paragraph.</p> <p>This is another paragraph.</p>
利点
- 複数の要素を簡単に取得できる
欠点
- ID やクラス名で絞り込みできない
- 目的の要素を取得できない場合がある
getElementsByTagNameよりも 絞り込み範囲が狭くなる ため、目的の要素を取得しやすいという利点があります。
const elements = document.getElementsByClassName("my-class");
console.log(elements); // <p class="my-class">This is a paragraph with class.</p>
getElementsByTagNameやgetElementsByClassNameよりも 汎用性が高く、柔軟な要素取得が可能です。
const elements = document.querySelectorAll("#my-id, .my-class");
console.log(elements); // <p id="my-id">This is a paragraph.</p> <p class="my-class">This is a paragraph with class.</p>
- 1つ以上** の要素を取得できる
document.body
- HTML ドキュメントの body 要素 を取得します。
- body 要素は、HTML ドキュメントのコンテンツ部分が含まれる要素です。
- body 要素から、子要素を辿って目的の要素を取得することができます。
const body = document.body;
const element = body.querySelector("#my-id");
console.log(element); // <p id="my-id">This is a paragraph.</p>
- すべての要素を辿る必要があるため、処理速度が遅くなる場合がある
document.documentElement
- ルート要素は、HTML ドキュメント全体の要素です。
const root = document.documentElement;
const element = root.querySelector("#my-id");
console.log(element); // <p id="my-id">This is a paragraph.</p>
JavaScript で要素を取得するには、様々な方法があります。それぞれの特徴を理解し、状況に応じて使い分けることが重要です。
- MDN Web Docs - document
javascript jquery dom
