はじめに
この記事を読めば、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個の実用的なサンプルコードを紹介しました。
