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

HTMLDOMの子プロパティ

HTML DOMのchildrenプロパティは、指定された要素のすべての子要素をHTMLコレクションの形式で返すために使用されます。これは読み取り専用のプロパティです。得られた要素には、0から始まるインデックス番号を使用してアクセスできます。

要素は、HTMLドキュメントと同じ順序で表示されます。子ノードのみが含まれ、空白やchildNodesプロパティのようなコメントは含まれません。

構文

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

element.children

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

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 1px solid blue;
      margin: 7px;
   }
</style>
</head>
<body>
<p>Click the button below to find out the number of div element children</p>
<button onclick="myChild()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element </p>
</div>
<p id="Sample"></p>
<script>
   function myChild() {
      var x = document.getElementById("DIV1").children.length;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
   }
</script>
</body>
</html>

出力

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

HTMLDOMの子プロパティ

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

HTMLDOMの子プロパティ

上記の例では-

を作成しました IDが「DIV1」の要素で、その中に2つの段落があります。他の要素と区別するために、色の境界線とマージンを追加しました- 


div {
   border: 1px solid blue;
   margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>

次に、ユーザーがクリックしたときにmyChild（）関数を実行するCOUNTボタンを作成しました-

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

myChild（）関数は、idが「DIV1」に等しい要素を取得します。この場合は

要素であり、そのchildren.lengthプロパティ値を取得して、変数xに割り当てます。ここで重要なのは、childrenプロパティは空白とコメントを考慮しないため、2つの

要素のみを考慮し、children.lengthは2を返します。この値は、innerHTML（ ）メソッド-

function myChild() {
   var x = document.getElementById("DIV1").children.length;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}

  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プロパティは効果がありません。 ブロック ブロック要素は新しい行に表示され、幅全体を取ります。