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

HTML DOMのchildElementCountプロパティとは？子要素の数を取得する方法を解説

HTML DOMのchildElementCountプロパティは、指定した要素が持つ子要素の数を返す読み取り専用のプロパティです。戻り値の型はunsigned long（符号なし整数）です。このプロパティは、HTML文書全体の子ノードをすべて返すわけではなく、あくまでプロパティを呼び出したノード直下の子要素のみをカウントします。テキストノードやコメントノードはカウントの対象にならない点にも注意してください。

構文

childElementCountプロパティの構文は以下の通りです。

node.childElementCount

サンプルコード

それでは、HTML DOMのchildElementCountプロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        border: 2px solid blue;
        margin: 7px;
        padding-left:20px;
    }
</style>
</head>
<body>
<p>下のボタンをクリックすると、div要素の子要素の数がわかります</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>見出し</h3>
<p>最初のp要素</p>
<p>2番目のp要素</p>
</div>
<p id="Sample"></p>
<script>
    function childCount() {
        var x = document.getElementById("myDIV").childElementCount;
        document.getElementById("Sample").innerHTML = "div要素には "+x+" 個の子要素があります";
    }
</script>
</body>
</html>

実行結果

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

HTML DOMのchildElementCountプロパティとは？子要素の数を取得する方法を解説

COUNTボタンをクリックすると −

HTML DOMのchildElementCountプロパティとは？子要素の数を取得する方法を解説

コードの解説

このサンプルでは、以下のような処理を行っています。

まず、id「myDIV」を持つ<div>要素を作成し、その内部に<h3>見出し1つと<p>要素2つの、合計3つの要素を配置しました。また、他の要素と視覚的に区別できるように、divに青い枠線・マージン・左パディングを設定しています。

div {
    border: 2px solid blue;
    margin: 7px;
    padding-left:20px;
}
<div id="myDIV">
<h3>見出し</h3>
<p>最初のp要素</p>
<p>2番目のp要素</p>
</div>

次に、クリックされるとchildCount()関数を実行する「COUNT」ボタンを設置しています。

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

childCount()関数では、getElementById()によってid「myDIV」の要素（この例では<div>）を取得し、そのchildElementCountプロパティの値を変数xに代入しています。<div>の中には<p>要素が2つと<h3>要素が1つ存在するため、childElementCountは「3」を返します。

最後に、innerHTMLプロパティを使って、取得した値をid「Sample」の段落に表示しています。

function childCount() {
    var x = document.getElementById("myDIV").childElementCount;
    document.getElementById("Sample").innerHTML = "div要素には "+x+" 個の子要素があります";
}
  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プロパティには、以下のような値を指定できます。 値説明