JavaScriptで子要素を簡単取得!10個の実用的なサンプルコード

JavaScriptで子要素を取得する簡単な方法 JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで子要素を簡単に取得できるようになります。

初心者でも分かりやすく解説しているので、安心して読み進めてください。

JavaScriptで子要素を取得する基本

JavaScriptでは、親要素から子要素を取得するために、様々な方法があります。

ここでは、querySelectorとgetElementByIdを使った2つの基本的な方法を紹介します。

○サンプルコード1:querySelectorを使った子要素取得

querySelectorを使うと、CSSセレクタを使って要素を取得できます。

次の例では、親要素のidが”parent”である要素の最初の子要素を取得しています。

const parent = document.querySelector("#parent");
const firstChild = parent.querySelector(":first-child");

console.log(firstChild); // 最初の子要素が表示されます

○サンプルコード2:getElementByIdとchildNodesを使った子要素取得

getElementByIdを使って親要素を取得し、その後childNodesを使って子要素を取得する方法もあります。

次の例では、親要素のidが”parent”である要素の最初の子要素を取得しています。

const parent = document.getElementById("parent");
const firstChild = parent.childNodes[0];

console.log(firstChild); // 最初の子要素が表示されます

JavaScriptで子要素を取得する応用例

基本的な子要素の取得方法を学んだところで、いくつかの応用例を紹介します。

これらのサンプルコードを参考に、自分のプロジェクトで活用してみてください。

○サンプルコード3:子要素を取得して操作する

子要素を取得した後、その子要素に対して操作を行うことができます。

次の例では、親要素のidが”parent”である要素のすべての子要素に対して、背景色を変更しています。

const parent = document.getElementById("parent");
const children = parent.children;

for (let i = 0; i < children.length; i++) {
  children[i].style.backgroundColor = "red";
}

○サンプルコード4:子要素の数を取得する

親要素の子要素の数を取得するには、childrenプロパティを使って次のように行います。

const parent = document.getElementById("parent");
const childCount = parent.children.length;

console.log(childCount); // 子要素の数が表示されます

○サンプルコード5:子要素のテキスト内容を取得する

子要素のテキスト内容を取得するには、textContentプロパティを使います。

次の例では、親要素のidが”parent”である要素の最初の子要素のテキスト内容を取得しています。

const parent = document.getElementById("parent");
const firstChild = parent.children[0];
const textContent = firstChild.textContent;

console.log(textContent); // 最初の子要素のテキスト内容が表示されます

○サンプルコード6:子要素の属性値を取得する

子要素の属性値を取得するには、getAttributeメソッドを使います。

次の例では、親要素のidが”parent”である要素の最初の子要素のクラス名を取得しています。

const parent = document.getElementById("parent");
const firstChild = parent.children[0];
const className = firstChild.getAttribute("class");

console.log(className); // 最初の子要素のクラス名が表示されます

○サンプルコード7:子要素を特定の条件でフィルタリングする

子要素を特定の条件でフィルタリングするには、Array.fromメソッドとfilterメソッドを使います。

次の例では、親要素のidが”parent”である要素の子要素のうち、クラス名が”selected”であるものだけを取得しています。

const parent = document.getElementById("parent");
const children = parent.children;
const selectedChildren = Array.from(children).filter(child => child.classList.contains("selected"));

console.log(selectedChildren); // クラス名が"selected"である子要素が表示されます

○サンプルコード8:子要素を繰り返し処理で操作する

子要素を繰り返し処理で操作するには、forEachメソッドを使います。

次の例では、親要素のidが”parent”である要素のすべての子要素に対して、テキスト内容を大文字に変換しています。

const parent = document.getElementById("parent");
const children = parent.children;

Array.from(children).forEach(child => {
  child.textContent = child.textContent.toUpperCase();
});

○サンプルコード9:子要素を動的に生成・追加する

子要素を動的に生成して親要素に追加するには、createElementメソッドとappendChildメソッドを使います。

次の例では、親要素のidが”parent”である要素に新しい子要素を追加しています。

const parent = document.getElementById("parent");
const newChild = document.createElement("div");
newChild.textContent = "新しい子要素";

parent.appendChild(newChild);

○サンプルコード10:子要素を削除する

子要素を削除するには、removeChildメソッドを使います。

次の例では、親要素のidが”parent”である要素の最初の子要素を削除しています。

const parent = document.getElementById("parent");
const firstChild = parent.children[0];

parent.removeChild(firstChild);

注意点と対処法

JavaScriptで子要素を取得・操作する際には、いくつかの注意点があります。

例えば、childNodesプロパティはテキストノードも含んでしまうため、意図しない結果が得られることがあります。

このような場合は、childrenプロパティを使うことで、要素ノードだけを対象にすることができます。

まとめ

この記事では、JavaScriptで子要素を取得する方法を初心者向けに徹底解説しました。

基本的な方法から応用例まで、10個の実用的なサンプルコードを紹介しました。