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

HTMLDOMchildElementCountプロパティ

HTML DOMのchildElementCountプロパティは、特定の要素の子要素の数を返す読み取り専用のプロパティです。 childElementCountの戻りタイプはunsignedlongです。照会されたノードの子要素のみが返され、HTMLドキュメントのすべての子ノードは返されません。

構文

以下は、childElementCountプロパティの構文です-

node.childElementCount

例

HTMLDOMのchildElementCountプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 2px solid blue;
      margin: 7px;
      padding-left:20px;
   }
</style>
</head>
<body>
<p>Click the button below to find out the no of children of the div element</p>
<button onclick="childCount()">COUNT</button>
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
   function childCount() {
      var x = document.getElementById("myDIV").childElementCount;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMchildElementCountプロパティ

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

HTMLDOMchildElementCountプロパティ

上記の例では-

IDが「myDIV」の

要素とその中に3つの要素を作成しました。 2つの

要素と

ヘッダー。また、他の要素と区別するために、divに色付きの境界線、マージン、パディングを追加しました-

div {
   border: 2px solid blue;
   margin: 7px;
   padding-left:20px;
}
<div id="myDIV">
<h3>HEADING</h3>
<p>First p element</p>
<p>Second p element</p>
</div>
>

次に、クリック時にchildCount（）メソッドを実行するボタンCOUNTを作成しました。

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

childCount（）メソッドは、IDが「myDIV」の要素（この場合は

）要素を受け取り、そのchildElementCountプロパティ値を変数xに割り当てます。
内に2つの

要素と

要素があるため、childElementCountは3を返しました。

返された値は、段落のinnerHTML（）メソッドを使用して、IDが「Sample」の段落に表示されます-

function childCount() {
   var x = document.getElementById("myDIV").childElementCount;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" children";
}

  1. HTMLDOMスタイルのpageBreakInsideプロパティ

    HTML DOMスタイルのpageBreakInsideプロパティは、HTMLドキュメントのHTML要素内の印刷または印刷プレビューのページ分割動作を返し、変更します。 構文 以下は構文です- 1. pageBreakInsideを返す object.pageBreakInside 2.pageBreakInsideの変更 object.pageBreakInside = “value” ここで、値は-になります。 値 説明 初期 このプロパティ値をデフォルト値に設定します。 継承 このプロパティ値は親要素から継承されます。 自動 必要に応じて、H

  2. HTMLDOMスタイルの表示プロパティ

    HTML DOMスタイルの表示プロパティは、要素の表示タイプを設定または返すために使用されます。要素は主にブロックまたはインラインです。 display：noneを使用して要素を非表示にすることもできます。 以下は、-の構文です。 表示プロパティの設定- object.style.display = value 上記のプロパティ値は次のように説明されます- 値 説明 インライン 要素をインライン要素として表示する場合、つまり、widthプロパティとheightプロパティは効果がありません。 ブロック ブロック要素は新しい行に表示され、幅全体を取ります。