JavaScriptを使用してクラス名で子要素を取得する方法

2024-02-08 07:06 JavaScriptDOM操作クラス名

JavaScriptを使用して、特定のクラス名を持つ要素の子要素を取得する方法はいくつかあります。以下にいくつかの方法とそれぞれのコード例を示します。

  1. querySelectorAllを使用する方法:

    const parentElement = document.getElementById('parentElementId');
const children = parentElement.querySelectorAll('.targetClass');

  2. getElementsByClassNameを使用する方法:

    const parentElement = document.getElementById('parentElementId');
const children = parentElement.getElementsByClassName('targetClass');

  3. childrenプロパティを使用する方法:

    const parentElement = document.getElementById('parentElementId');
const children = parentElement.children;
const filteredChildren = Array.from(children).filter(child => child.classList.contains('targetClass'));

これらの方法はいずれも目的のクラス名を持つ子要素を取得することができます。選択した方法に応じて、適切なコードを選択して使用してください。

なお、上記のコード例では、parentElementIdは親要素のIDを、targetClassは目的のクラス名を示しています。実際の要素やクラス名に合わせて適切に置き換えてください。