JavaScriptで子要素を取得する方法 10選！初心者向けに解説

2024-01-11

当サイトでは一部リンクに広告が含まれています

JavaScriptを使ってWebページの中の特定の要素を取得することは、Web開発の現場ではよくあります。

たとえば、あるリスト内の特定のアイテムを取得してスタイルを変更する必要がある場合や、フォーム内の特定の入力フィールドにフォーカスを当てる必要がある場合などです。

こういった場合、JavaScriptを使ってDOM（Document Object Model）の特定の要素にアクセスし、必要な操作を行います。

しかし、DOM 操作と聞くと JavaScript 初心者にとっては難しく感じてしまいますよね…。

この記事では、JavaScriptを使用して、特定のHTML要素の子要素を様々な方法で取得する方法について、基本から応用までをわかりやすく解説します！

また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！

現役のフルスタックWebエンジニアとして活躍中
プログラミングスクールで教材を執筆した経験アリ
副業でプログラミングスクール講師をしている教育のプロ

JavaScript でHTMLを自由に操作できるようになると、複雑なWebサイトを作成することができるようになるので、ぜひマスターしておきましょう！

HTML要素の親子関係：子要素とは

HTMLの世界では、要素（タグ）の間には「親子関係」というものが存在します。

これは、ある要素が別の要素の中に含まれるという関係です。

親要素は子要素を囲む形で配置されます。

親子関係の基本

例えば、以下のHTMLコードを見てみましょう。

<div id="parent">
  <div id="child1">こんにちは</div>
  <div id="child2">こんばんは</div>
</div>

このコードでは、最外側の<div id="parent">が親要素です。

そして、その中にある<div id="child1">と<div id="child2">が子要素になります。

つまり、親要素の<div>は2つの子要素を持っていると言えます。

親子関係の重要性

親子関係を理解することは、Webページの構造を把握する上で非常に重要です。

この概念は、ページのレイアウトやデザインを考える時だけでなく、JavaScriptなどのプログラミング言語を使ってWebページを操作する際にも役立ちます。

親要素：他の要素を包含する（囲む）要素
子要素：他の要素に包含される（囲まれる）要素

この親子関係を把握することで、HTMLの構造をより深く理解し、効果的なWebページを作成することができます。

また、JavaScriptを使って特定の子要素を対象とする操作を行う際にも、この親子関係は非常に重要な役割を果たします。

親子関係の理解は、HTMLとCSS、JavaScriptを学ぶ上での基本中の基本です。

この概念をしっかりと理解しておくことで、Web開発のスキルが格段に向上します。

JavaScriptで子要素を取得する方法

最初（1番目）の子要素を取得する

JavaScriptを使ってWebページの中の特定の要素を取得することは、Web開発において非常に重要です。

特に、ある要素の最初の子要素を取得する方法は、多くの場面で役立ちます。

ここでは、その方法を紹介します。

HTML構造の例

まず、以下のようなHTML構造を考えてみましょう。

<div id="parent">
  <p>最初の子要素</p>
  <p>二番目の子要素</p>
</div>

このHTMLでは、div要素にid="parent"という識別子が付けられており、その中に2つのp要素が含まれています。

JavaScriptで最初の子要素を取得するコード

最初の子要素を取得するには、JavaScriptでfirstElementChildプロパティを使用します。

以下のJavaScriptコードを見てみましょう。

const parentElement = document.getElementById('parent');
const firstChild = parentElement.firstElementChild;
console.log(firstChild.textContent); // "最初の子要素" と出力されます

このコードでは、まずgetElementByIdメソッドを使ってid="parent"の要素を取得します。

次に、firstElementChildプロパティを使ってその最初の子要素を取得し、textContentプロパティを使ってその内容をコンソールに表示しています。

この方法で、HTML要素の中から最初の子要素を簡単に取得できます。

このようにJavaScriptを使うことで、Webページ上の要素を自由に操作することが可能になり、動的なWebページを作成することができます。

最後の子要素を取得する

Webページの中で最後の子要素を取得することも、JavaScriptを使って簡単に行えます。

これは特に、リストやグループの中で最新の項目を扱いたい時などに便利です。

HTMLの例

例えば、以下のようなHTMLがあるとします。

<ul id="itemList">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ここでは、ul要素にいくつかのli要素が含まれており、これらは順番にリストアイテムとして表示されます。

JavaScriptで最後の子要素を取得するコード

最後の子要素を取得するには、lastElementChildプロパティを使用します。

以下のコードを見てみましょう。

const itemList = document.getElementById('itemList');
const lastItem = itemList.lastElementChild;
console.log(lastItem.textContent); // "アイテム3" と出力されます

このコードでは、まずgetElementByIdを用いてid="itemList"の要素を取得しています。

その後、lastElementChildプロパティを使ってその最後の子要素を取得し、textContentプロパティでその内容をコンソールに表示しています。

この方法を使えば、リストや他の要素グループの中で最後の要素を簡単に特定し、操作することができます。

Webページが動的に変更される場合にも、この方法は非常に役立ちます。

すべての子要素を取得する

Webページにおける特定の要素内のすべての子要素を取得することは、JavaScriptにおいてよく使われる操作です。

この操作は、ページの構造を理解し、動的に要素を操作するために非常に重要です。

HTMLの例

以下は、複数の子要素を含む簡単なHTMLの例です。

<div id="container">
  <p>最初の段落</p>
  <p>二番目の段落</p>
  <p>三番目の段落</p>
</div>

このHTMLでは、div要素（id="container"）の中に3つのp（段落）要素があります。

JavaScriptですべての子要素を取得するコード

すべての子要素を取得するには、childrenプロパティを使用します。

このプロパティは、指定された要素の子要素を含むHTMLコレクションを返します。

以下のコードを見てみましょう。

const container = document.getElementById('container');
const children = container.children;
console.log(children); // すべての子要素が表示されます

出力結果は以下のようになります。

HTMLCollection(3) [p, p, p]

このコードでは、まずgetElementByIdメソッドを使ってid="container"の要素を取得し、次にchildrenプロパティを用いてそのすべての子要素を取得しています。

childrenプロパティが返すのは、要素のコレクションであり、これを使って各子要素にアクセスすることができます。

例えば、children[0]は最初の子要素を、children[children.length - 1]は最後の子要素を返します。

この方法を使うことで、任意のHTML要素の子要素をすべて簡単に取得し、それらを操作することが可能になります。

これにより、動的なWebアプリケーションの開発が容易になります。

特定のタグの子要素を取得する

JavaScriptを使用して、特定のタグを持つ子要素だけを取得する方法は、Web開発においてよく必要とされます。

この技術は、特定の種類の要素だけに焦点を当てたい場合に特に役立ちます。

HTMLの例

以下に、さまざまなタグを含むHTMLの例を示します。

<div id="content">
  <h2>見出し</h2>
  <p>段落1</p>
  <p>段落2</p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
</div>

このHTMLでは、div要素の中にh2、p、およびul要素が含まれています。

JavaScriptで特定のタグの子要素を取得するコード

特定のタグの子要素を取得するには、getElementsByTagNameメソッドを使用します。

このメソッドは、指定されたタグ名を持つすべての要素を含むHTMLコレクションを返します。

以下のコードを見てみましょう。

const content = document.getElementById('content');
const paragraphs = content.getElementsByTagName('p');
console.log(paragraphs); // すべての<p>タグの要素が表示されます

このコードでは、まずgetElementByIdメソッドを用いてid="content"の要素を取得し、次にgetElementsByTagNameメソッドを使ってその中のすべてのpタグの要素を取得しています。

getElementsByTagNameが返すのは、指定したタグを持つすべての要素のコレクションであり、これを使って各要素にアクセスすることができます。

たとえば、paragraphs[0]は最初のp要素を、paragraphs.lengthはp要素の総数を返します。

この方法を用いると、特定のタグを持つすべての要素を簡単に取得し、それらを操作することが可能になります。

これは、特定の種類のコンテンツに対して操作を行いたい場合に特に有用です。

class名から子要素を取得する

Web開発において、class名を基にして特定の要素群を取得することは一般的な作業です。

class名は、スタイルや特定の機能を複数の要素に適用するために広く用いられます。

JavaScriptでは、class名を使ってこれらの要素を簡単に取得できます。

HTMLの例

以下は、異なるclass名を持つ要素を含むHTMLの例です。

<div id="container">
  <p class="highlight">ハイライトされた段落1</p>
  <p class="highlight">ハイライトされた段落2</p>
  <p>通常の段落</p>
</div>

このHTMLでは、div要素の中にclass="highlight"を持つp要素が2つあり、さらに通常のp要素が1つあります。

JavaScriptでclass名の子要素を取得するコード

特定のclass名を持つ要素を取得するには、getElementsByClassNameメソッドを使用します。

このメソッドは、指定されたclass名を持つすべての要素を含むHTMLコレクションを返します。

以下のコードを見てみましょう。

const container = document.getElementById('container');
const highlightedParagraphs = container.getElementsByClassName('highlight');
console.log(highlightedParagraphs); // すべてのclass="highlight"の要素が表示されます

このコードでは、getElementByIdを用いてid="container"の要素を取得し、getElementsByClassNameメソッドを使ってその中のclass="highlight"を持つすべての要素を取得しています。

getElementsByClassNameが返すのは、指定したclass名を持つすべての要素のコレクションであり、これを使って各要素にアクセスすることができます。

たとえば、highlightedParagraphs[0]は最初のハイライトされた段落を、highlightedParagraphs.lengthはハイライトされた段落の総数を返します。

この方法を用いると、特定のclass名を持つすべての要素を簡単に取得し、それらを操作することが可能になります。

これは、特定のスタイルや機能を持つ要素群に対して操作を行いたい場合に特に有用です。

id名から子要素を取得する

Webページ内の特定の要素を効率的に取得する一つの方法は、その要素のid名を使用することです。

HTMLでは、id属性はページ内の一意の識別子として機能し、JavaScriptを使用してこのidを持つ特定の要素を直接取得することができます。

HTMLの例

以下に、id属性を持つ要素の例を示します。

<div id="uniqueSection">
  <p>ここはユニークなセクションです。</p>
</div>

このHTMLでは、div要素にid="uniqueSection"という一意のidが割り当てられています。

JavaScriptでid名の要素を取得するコード

id名を使用して特定の要素を取得するには、getElementByIdメソッドを使用します。

このメソッドは、指定されたidを持つ要素を直接返します。

以下のコードを見てみましょう。

const uniqueSection = document.getElementById('uniqueSection');
console.log(uniqueSection); // id="uniqueSection"の要素が表示されます

このコードでは、getElementByIdメソッドを使ってid="uniqueSection"の要素を直接取得しています。

getElementByIdは非常に効率的で、ページ内の任意の位置にある一意の要素を瞬時に取得できます。

これは、特定の要素に対して操作を行いたい場合や、ページ内で重要な役割を持つ特定のセクションを扱う場合に特に便利です。

この方法を用いることで、idを持つ任意の要素を迅速に取得し、その後の操作やデータの取り扱いを行うことができます。

セレクタから子要素を取得する

Web開発において、セレクタを使用して子要素を取得する方法は、特に柔軟性と精度が求められる場合に非常に有効です。

CSSセレクタを用いて、特定のパターンや条件に一致する要素を取得することができます。

この方法は、より複雑な要素の選択を可能にします。

HTMLの例

以下に、異なる要素とクラス名を含むHTMLの例を示します。

<div id="mainContent">
  <p class="important">重要な情報</p>
  <p>一般的な情報</p>
  <div class="note">注記</div>
</div>

このHTMLでは、div要素の中にクラス名が異なる複数のp要素とdiv要素が含まれています。

JavaScriptでセレクタを使用して子要素を取得するコード

セレクタを使用して子要素を取得するには、querySelectorやquerySelectorAllメソッドを使用します。

これらのメソッドは、CSSセレクタに一致する最初の要素（querySelector）またはすべての要素（querySelectorAll）を返します。

以下のコードを見てみましょう。

const mainContent = document.getElementById('mainContent');
const importantParagraph = mainContent.querySelector('p.important');
const allNotes = mainContent.querySelectorAll('div.note');

console.log(importantParagraph); // class="important"の最初の<p>要素が表示されます
console.log(allNotes); // すべてのclass="note"の<div>要素が表示されます

このコードでは、まずgetElementByIdを用いてid="mainContent"の要素を取得し、次にquerySelectorとquerySelectorAllメソッドを使って特定のクラスを持つ特定のタグの要素を取得しています。

querySelectorとquerySelectorAllは、より複雑な要素の選択を可能にするため、複数のクラス、ID、属性などを含むセレクタを組み合わせて使用することができます。

これにより、Webページ上で非常に具体的かつ柔軟な要素の選択と操作を行うことが可能になります。

子要素をループで取得する

Webページの特定の要素内のすべての子要素をループ処理で取得する方法は、JavaScriptにおいて特に役立ちます。

これにより、各子要素に対して一連の操作を効率的に実行することが可能になります。

例えば、リストの各項目にスタイルを適用したり、データを更新したりする際にこの方法が使われます。

HTMLの例

以下に、複数の子要素を含むHTMLの例を示します。

<ul id="itemList">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

このHTMLでは、ul要素の中に複数のli要素が含まれています。

JavaScriptで子要素をループ処理するコード

子要素をループ処理で取得するには、childrenプロパティやquerySelectorAllメソッドと組み合わせてforループやforEachメソッドを使用します。

以下のコードを見てみましょう。

const itemList = document.getElementById('itemList');
const items = itemList.children;

for (let i = 0; i < items.length; i++) {
  console.log(items[i].textContent); // 各アイテムのテキストが表示されます
}

このコードでは、まずgetElementByIdを用いてid="itemList"の要素を取得し、childrenプロパティを使用してその子要素を取得しています。

その後、forループを用いて各子要素に対して操作（ここではコンソールへの出力）を行っています。

この方法では、子要素の数が不明であっても、すべての子要素に対して一定の操作を行うことができます。

これは、動的に内容が変わるリストやグリッドなどに特に有用です。

子要素の子要素(孫要素)を取得する

Webページ内で、ある要素の子要素のさらに子要素（孫要素）を取得することは、より複雑なDOM構造の操作において重要です。

この方法は、ネストされたリストやマルチレベルのメニューなど、階層的な構造を持つ要素を扱う際に特に有効です。

HTMLの例

以下に、孫要素を含むHTMLの例を示します。

<div id="outerContainer">
  <div class="innerContainer">
    <p>親要素の子要素</p>
    <div class="nestedContainer">
      <span>孫要素</span>
    </div>
  </div>
</div>

このHTMLでは、outerContainerの中にinnerContainerがあり、その中にさらにnestedContainerという孫要素が含まれています。

JavaScriptで孫要素を取得

孫要素を取得するには、複数のステップで要素にアクセスするか、より具体的なセレクタを使用します。

以下のコードを見てみましょう。

const outerContainer = document.getElementById('outerContainer');
const nestedContainer = outerContainer.querySelector('.nestedContainer');
const grandchildElement = nestedContainer.firstElementChild;

console.log(grandchildElement.textContent); // "孫要素" と表示されます

このコードでは、まずgetElementByIdを使ってouterContainerを取得し、次にquerySelectorを使用してnestedContainerを取得しています。

最後に、firstElementChildプロパティを用いて孫要素を取得しています。

この方法では、DOMの深い階層にある要素に効率的にアクセスすることができます。

また、querySelectorやquerySelectorAllを使用して、さらに複雑なセレクタを使うことで、特定の条件に一致する孫要素を直接取得することも可能です。

子要素があるかどうかを判定する

Web開発において、特定の要素に子要素が存在するかどうかを判定することは、動的なコンテンツの管理や条件付きのUI操作において重要です。

JavaScriptでは、簡単な方法でこの判定を行うことができます。

HTMLの例

以下に、子要素の有無を確認するためのHTMLの例を示します。

<div id="container">
  <p>最初の段落</p>
</div>

<div id="emptyContainer">
  <!-- 子要素がない -->
</div>

このHTMLでは、containerには子要素としてp要素がありますが、emptyContainerには子要素がありません。

JavaScriptで子要素の有無を判定するコード

子要素があるかどうかを判定するには、childrenプロパティのlengthを確認します。

以下のコードを見てみましょう。

const container = document.getElementById('container');
const emptyContainer = document.getElementById('emptyContainer');

const hasChildrenContainer = container.children.length > 0;
const hasChildrenEmptyContainer = emptyContainer.children.length > 0;

console.log(hasChildrenContainer); // true（子要素がある）
console.log(hasChildrenEmptyContainer); // false（子要素がない）

このコードでは、getElementByIdを使ってcontainerとemptyContainerの両方の要素を取得し、それぞれのchildren.lengthを確認しています。

lengthが0より大きい場合、子要素が存在することを意味します。

この方法を使用すると、特定の要素が子要素を持っているかどうかを簡単に確認できます。

これは、動的なコンテンツの表示や非表示、または特定の条件下でのUI要素の操作を行う際に特に有用です。

子要素から他の要素を取得する方法

では、子要素から他の要素を取得する方法を見ていきましょう。

これは、特定の要素に基づいてその周辺の要素を操作する際に非常に役立ちます。

子要素から親要素を取得する

Webページ上で子要素からその親要素にアクセスすることは、DOM（Document Object Model）の操作において一般的な作業です。

これは、特定の子要素のコンテキストに基づいて親要素に対する操作を行いたい場合に特に有用です。

子要素から親要素を取得するには、parentNodeプロパティまたはparentElementプロパティを使用します。

これらのプロパティは、指定された要素の親ノードまたは親要素を返します。

以下のコードを見てみましょう。

const childElement = document.getElementById('child');
const parent = childElement.parentElement;

console.log(parent.id); // 子要素の親要素のIDが表示されます

このコードでは、まずgetElementByIdを使って特定の子要素を取得し、次にparentElementプロパティを用いてその親要素を取得しています。

子要素から兄弟要素を取得する

兄弟要素の取得は、特定の要素の前後に配置された要素にアクセスする際に重要です。

これは、特定の要素に基づいて周辺の要素を操作する必要がある場合に特に便利です。

兄弟要素を取得するには、nextSibling、nextElementSibling、previousSibling、またはpreviousElementSiblingプロパティを使用します。

これらは、指定された要素の前後にある兄弟ノードまたは兄弟要素を返します。

以下のコードを見てみましょう。

const element = document.getElementById('someElement');
const nextSibling = element.nextElementSibling;
const previousSibling = element.previousElementSibling;

console.log(nextSibling); // 指定要素の次の兄弟要素が表示されます
console.log(previousSibling); // 指定要素の前の兄弟要素が表示されます

子要素から前後の要素を取得する

子要素から前後の要素を取得することは、ページ上の連続した要素群をナビゲートする際に必要です。

これにより、特定の要素の前後に配置されている要素に対して、順序に基づいて操作を行うことができます。

前後の要素を取得するには、上述したnextElementSiblingやpreviousElementSiblingプロパティを使用します。

これらのプロパティは、特定の要素に隣接する要素を指し、ページの流れに沿った操作に適しています。

const element = document.getElementById('someElement');
const nextElement = element.nextElementSibling;
const previousElement = element.previousElementSibling;

console.log(nextElement); // 指定要素の次の要素が表示されます
console.log(previousElement); // 指定要素の前の要素が表示されます