JavaScriptのgetElement○○メソッドまとめ

更新日2026/01/15

JavaScriptでWebページの要素を操作するには、まず対象となるDOM要素を取得する必要があります。
この記事では、要素取得に使われる getElement や getElements で始まるメソッドについてまとめていきます。

getElementById()｜最速で単一要素を取得

【構文】

JavaScript
document.getElementById('id名');

getElementById は、id属性が一致する最初の要素を取得します。要素が存在しなければ null を返します。
同じIDを複数の要素に付けていると予期せぬ動作になることがあります。

一つの要素を取得するなら、このメソッドが高速で確実。

【サンプルコード】

HTML
<h1 id="main-title">こんにちは</h1>
<script>
  const title = document.getElementById('main-title');
  title.textContent = 'Hello World!';
</script>

getElementsByClassName()｜同じクラスの要素をまとめて取得

【構文】

JavaScript
document.getElementsByClassName('クラス名');

getElementsByClassName は、クラス名で要素を取得します。

HTMLCollection（動的）で返し、ページ内容が変わると自動的に更新されます。
インデックスでアクセス可能（elements[0] などが使える）なのも特徴です。

【サンプルコード】

HTML
<ul>
  <li class="item">りんご</li>
  <li class="item">みかん</li>
  <li class="item">ぶどう</li>
</ul>
<script>
  const items = document.getElementsByClassName('item');
  for (let i = 0; i < items.length; i++) {
    items[i].style.color = 'red';
  }
</script>

要素に対して何か処理する際はfor文を使用します。

関連記事

getElementsByClassName を使ってエラーが出たときの解決法

【補足】

今回は、document.getElement... と、document 内の要素を取得するコードを記述していますが、elementを指定して要素を取得することもできます。

HTML
<ul id="items">
  <li class="item">りんご</li>
  <li class="item">みかん</li>
  <li class="item">ぶどう</li>
</ul>
<script>
  const item = items.getElementsByClassName('item');
  for (let i = 0; i < item.length; i++) {
    item[i].style.color = 'red';
  }
</script>

getElementsByTagName()｜HTMLタグ単位で一括取得

【構文】

JavaScript
document.getElementsByTagName('タグ名');

特徴

  • 指定タグ名の全要素を HTMLCollection（動的）で返す
  • '*' を指定すると全要素を取得可能

【サンプルコード】

HTML
<p>りんご</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length);

使用例

  • 全てのリンク(<a>)を取得して外部リンクにアイコンを付ける
  • ページ内の全見出しタグを取得して目次を作る

getElementsByName()｜フォーム要素取得に便利

【構文】

JavaScript
document.getElementsByName('name属性値');

特徴

  • 指定したname属性を持つ要素を NodeList（静的）で返す
  • 主にフォーム部品に利用

【サンプルコード】

HTML
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<script>
  const radios = document.getElementsByName('gender');
  radios[0].checked = true;
</script>

まとめ

getElements で始まるメソッドは、IDで取得するかクラス名で取得するか、また一つの要素でいいのか複数の要素を取得したいのかによって使い分けます。

  • 単一要素を素早く取得 → getElementById
  • 複数要素をまとめて取得 → getElementsByClassName / getElementsByTagName
  • フォーム要素を属性で取得 → getElementsByName

動的コレクションか静的コレクションかを理解して使い分けることもポイントです。

メソッド名引数戻り値型動的/静的主な用途
getElementByIdid名要素 or null静的単一要素の高速取得
getElementsByClassNameクラス名HTMLCollection動的同一クラスの一括取得
getElementsByTagNameタグ名HTMLCollection動的タグ単位取得
getElementsByNamename属性NodeList静的フォーム要素取得
各メソッド比較表

HTMLCollectionとNodeListの違い【JavaScript】- 株式会社トミワテック

またgetElementは、指定する属性（idかクラスなど）によってメソッドを使い分ける必要がありますが、一つのメソッドでCSSセレクタのように、#id-name 、.class_name といった記述で要素を取得するquerySelectorメソッドもあります。

querySelectorを使った要素取得

querySelector, querySelectorAll でCSSセレクターの条件に合う要素を取得

カテゴリー : JavaScript

JavaScript関連の記事

目次

→ index