HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのchildrenプロパティとは？子要素を取得する方法を実例付きで解説

HTML DOMのchildrenプロパティは、指定した要素が持つすべての子要素（child elements）をHTMLCollectionの形式で取得するためのプロパティです。このプロパティは読み取り専用であり、取得した要素には0から始まるインデックス番号を使ってアクセスできます。

childrenプロパティで取得される要素は、HTMLドキュメント内に記述されている順序と同じ順序で並びます。また、類似のchildNodesプロパティと異なり、空白（テキストノード）やコメントノードは含まれず、要素ノードのみが返される点が大きな特徴です。

childrenプロパティの構文

childrenプロパティの基本的な構文は以下の通りです。

element.children

使用例：div要素の子要素数を取得する

ここでは、実際にchildrenプロパティを使って、div要素の子要素の数を取得するサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        border: 1px solid blue;
        margin: 7px;
    }
</style>
</head>
<body>
<p>下のボタンをクリックすると、div要素の子要素の数が表示されます</p>
<button onclick="myChild()">COUNT</button>
<div id="DIV1">
<p>最初のp要素 </p>
<p>2番目のp要素 </p>
</div>
<p id="Sample"></p>
<script>
    function myChild() {
        var x = document.getElementById("DIV1").children.length;
        document.getElementById("Sample").innerHTML = "このdiv要素の子ノードは "+x+" 個です";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのchildrenプロパティとは？子要素を取得する方法を実例付きで解説

COUNTボタンをクリックすると、以下のように子要素の数が出力されます。

HTML DOMのchildrenプロパティとは？子要素を取得する方法を実例付きで解説

コードの解説

それでは、上記の例で何を行っているのか、順を追って見ていきましょう。

1. div要素とスタイルの定義

まず、id「DIV1」を持つdiv要素を作成し、その中に2つの段落（p要素）を配置しています。他の要素と区別できるよう、青色の枠線とマージンをCSSで設定しています。

div {
    border: 1px solid blue;
    margin: 7px;
}
<div id="DIV1">
<p>最初のp要素 </p>
<p>2番目のp要素</p>
</div>

2. ボタンの設置

次に、クリックされるとmyChild()関数を実行するCOUNTボタンを作成しています。

<button onclick="myChild()">COUNT</button>

3. myChild()関数の処理内容

myChild()関数では、getElementById()メソッドによってidが「DIV1」の要素（この場合はdiv要素）を取得し、そのchildren.lengthプロパティの値を変数xに代入しています。

ここで重要なのは、childrenプロパティは空白やコメントを考慮しないという点です。そのため、対象となるのは2つのp要素のみとなり、children.lengthは「2」を返します。最後に、この値をinnerHTMLメソッドを使ってid「Sample」の段落に表示しています。

function myChild() {
    var x = document.getElementById("DIV1").children.length;
    document.getElementById("Sample").innerHTML = "このdiv要素の子ノードは "+x+" 個です";
}

まとめ

childrenプロパティを使えば、指定した要素の子要素だけを簡単に取得できます。childNodesプロパティとの違い（空白・コメントを含まない）を理解しておくことで、意図した通りのDOM操作が可能になります。ぜひ実際にコードを書いて試してみてください。

  1. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ

  2. HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

    HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明