DOM要素取得入門IDクラス

• DOM要素取得の基礎
• ID取得とクラス取得
• タグ取得とノードの理解

DOM要素取得の基礎

JavaScript初心者が最初に直面する課題の一つが、DOM要素取得です。DOM（Document Object Model）は、HTML文書をツリー構造として表現したもので、JavaScriptからはこのツリーを操作してページを動的に変更できます。要素検索は、getElementById、querySelector、querySelectorAll などのメソッドを使って行います。これらはそれぞれ、ID取得、クラス取得、タグ取得の目的に応じて使い分けることが重要です。

まずは getElementById です。IDは文書内で一意であるため、ID取得は最も高速で確実な方法です。以下のように書きます。

const header = document.getElementById('main-header');

次に querySelector は CSS セレクタを使って最初に一致する要素を取得します。クラス取得や複雑な構造の検索に便利です。

const firstItem = document.querySelector('.list-item');

querySelectorAll は一致するすべての要素を NodeList として返します。NodeList は配列のように扱えますが、配列メソッドは直接使えないので Array.from で変換することが多いです。

const items = Array.from(document.querySelectorAll('.list-item')); // 配列に変換

ID取得とクラス取得

ID取得は getElementById で行いますが、クラス取得は querySelectorAll を使うのが一般的です。クラス名は複数の要素に付与できるため、同じスタイルや機能を持つ要素をまとめて操作したい場合に便利です。

クラス取得の例として、以下のように書きます。

const buttons = document.querySelectorAll('.btn'); // .btn クラスを持つすべての要素

取得した NodeList は forEach でループできます。

buttons.forEach(btn => {
  btn.addEventListener('click', () => console.log('クリック！'));
});

クラス取得は要素検索の一部として頻繁に使われます。クラス名はスペースで区切って複数指定でき、複数条件で検索することも可能です。

タグ取得とノードの理解

タグ取得は querySelectorAll でタグ名を指定して行います。例えば、すべての p 要素を取得する場合は次のようにします。

const paragraphs = document.querySelectorAll('p');

ノードとは、DOMツリーの各要素やテキスト、コメントなどを指します。ノードは親子関係を持ち、親ノードから子ノードへ、また子ノードから親ノードへアクセスできます。例えば、ある要素の親ノードを取得するには parentNode を使います。

const parent = header.parentNode; // header の親ノードを取得

ノードの操作は、要素の追加・削除・置換などに不可欠です。JavaScript初心者は、まずはノードの構造を理解し、次に getElementById や querySelector で取得したノードを操作する練習を積むと良いでしょう。

この記事はAIによって作成されました。