新米エンジニアと学ぶDOM要素の取得

2025.12.14Update

なべしま

🎅 この記事は、ニフティアドベントカレンダーの9日目の記事です。

はじめに

こんにちは！新卒1年目のなべしまです。寒くなってきましたね。

街では華やかなクリスマスツリーが現れる季節になりました。そんな中、私の前に現れたのは複雑なDOMツリーでした。

筆者について

入社：
- 2025年4月（新卒1年目）
担当業務：
- カスタマーサポートグループ（ジョブローテ中）
- コールセンター支援ツールの運用開発業務
TypeScript/JavaScript 開発経験
- 学生時代の授業にて、少しだけ演習を行った程度

きっかけ

現在担当しているツールでは、開発言語としてTypeScriptを利用しています。業務中、DOMを操作する querySelector メソッドに遭遇しました。getElementById メソッドは知っていたのですが、両者の違いについて気になり、まとめてみようと思いました。

この記事では、JavaScript/TypeScriptで使えるさまざまなDOM要素取得メソッドの特徴や違いを解説します。知識の整理や新たな学びのきっかけになれば嬉しいです。

事前準備

DOMツリーについて

ブラウザは HTML を読み込むと、内部で DOM（Document Object Model） と呼ばれるツリー構造を生成します。DOM は文書をツリー構造で表現し、各ノードがオブジェクトを含みます。DOM のメソッドでツリーにアクセスし、文書構造やスタイル、コンテンツの変更ができます。

DOM は HTML をプログラムで操作するためのデータ構造です。そして、JavaScript が操作するのはこのツリー内の「ノード（要素）」となります。

document

└── <html>

├── <head>

└── <body>

├── <div class="profile-card">

│ ├── <h2 id="card-title">

│ ├── <div class="user-info">

│ └── <div class="actions">

└── ...

要素について

HTMLElement
- HTMLのタグ1つ分を表すオブジェクト（例: <div>, <p>, <button> など）
HTMLCollection
- HTMLElementの汎用的な集合（配列風オブジェクト）
- 動的であり、DOM の変更が自動的に反映
NodeList
- ノードのコレクション（配列風オブジェクト）
- querySelectorAll が返す NodeList は静的
- DOM の変更は反映されない

DOM要素を取得する方法

例えば、以下のようなHTMLドキュメントを見てみましょう。ここから、要素を単一で取得したいことを考えます。

<body>

<h2 id="card-title">ユーザプロフィール</h2>

<p class="text">職業: システムエンジニア</p>

</div>

<button class="btn">フォローする</button>

</div>

</body>

要素取得メソッドの例

idから取得する場合
getElementById でidを指定することでHTMLElementオブジェクトを取得できます。要素が見つからない場合は null を返します。

1
2

const title = document.getElementById('card-title');
// 戻り値: HTMLElement | null

classから取得する場合

getElementsByClassName でclassを指定することによって、HTMLCollectionオブジェクトを取得できます。このとき、単一要素で取得したい場合は、HTMLCollectionの要素番号を指定する必要があります。

複数のクラス名を指定する場合は、半角スペースで区切ります。

const texts = document.getElementsByClassName('text');

// 戻り値: HTMLCollection

// 単一要素を取得する場合

const firstText = texts[0];

// 戻り値: HTMLElement | undefined

タグ名から取得する場合

getElementsByTagName でタグ名を指定することによって、HTMLCollectionオブジェクトを取得できます。getElementsByClassName と同様に、単一要素で取得したい場合は、HTMLCollectionの要素番号を指定する必要があります。

const buttons = document.getElementsByTagName('button');

// 戻り値: HTMLCollection

// 単一要素を取得する場合

const firstButton = buttons[0];

// 戻り値: HTMLElement | undefined

querySelectorでの要素取得

利用方法

CSSセレクタを利用した要素取得

querySelector では、id、class、タグ名など、CSS セレクタを利用して要素を取得することができます。要素が見つからない場合は null を返します。

// idでの指定

const title = document.querySelector('#card-title');

// classでの指定

const mainTitle = document.querySelector('.main-title');

// タグでの指定

const button = document.querySelector('button');

// 戻り値: HTMLElement | null

複数のCSSセレクタを利用
親要素と子要素の間に半角スペースを入れて指定することで、子孫要素を取得することができます。

1
2
3

const userName = document.querySelector('.user-info .text');
console.log(userName.textContent); // 出力: "名前: なべしま"

検索方式

querySelector メソッドは指定されたセレクタに一致する、ドキュメント内の最初のHTMLElementを返します。

直前の例のような式では、「名前: なべしま」を含むDOM要素は取得できますが、「職業：システムエンジニア」が含まれるDOM要素を取得したい場合は、2番目の要素を取得する必要があります。

// 2番目の.text要素を取得する場合

const allTexts = document.querySelectorAll('.text');

const jobInfo = allTexts[1]; // 「職業: システムエンジニア」

複数の要素を取得する場合

querySelectorAll を使用すると、一致するすべての要素を NodeList として取得できます。

const allTexts = document.querySelectorAll('.text');

// 戻り値: NodeList

// forEach で反復処理が可能

allTexts.forEach(text => {

console.log(text.textContent);

});

まとめ

今回登場した、DOM要素取得のメソッドを表にまとめます。

メソッド	戻り値の型	特徴
`getElementById`	HTMLElement \| null	IDで単一要素を取得
`getElementsByClassName`	HTMLCollection	クラス名で複数要素を取得（ライブコレクション）
`getElementsByTagName`	HTMLCollection	タグ名で複数要素を取得（ライブコレクション）
`querySelector`	HTMLElement \| null	CSSセレクタで最初の要素を取得
`querySelectorAll`	NodeList	CSSセレクタで全ての要素を取得（静的）

実務では便利な querySelector を利用しましたが、その他のDOM要素取得メソッドの特徴や戻り値の型の違いを知り、学びになりました。

今回の学びを、今後のDOM操作の実装や、思い通りに動かない時のエラー究明に役立てていきたいです。