HTMLDOMchildNodesプロパティ
HTML DOMのchildNodesプロパティは、ノードの子ノードのコレクションをNodeListオブジェクトの形式で返します。ノードはソートされており、HTMLドキュメントに表示されるのと同じ順序になっています。これらのノードには、0から始まるインデックス番号でアクセスできます。これは読み取り専用のプロパティです。空白とコメントもノードと見なされることを忘れないでください。
構文
以下は、childNodesプロパティの構文です-
elementNodeReference.childNodes;
例
HTMLDOMのchildNodesプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid blue;
margin: 7px;
}
</style>
</head>
<body>
<p>Click the button below to find the div element childnodes.</p>
<button onclick="countNodes()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
COUNTボタンをクリックすると-
上記の例では-
IDが「DIV1」の
div {
border: 1px solid blue;
margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div> 次に、ユーザーがクリックしたときにcountNodes（）メソッドを実行するボタンCOUNTを作成しました。
<button onclick="countNodes()">COUNT</button>
countNodes（）関数は、idが「DIV1」に等しい要素を取得します。この場合は
要素があるため、childnodes.lengthは5を返します。戻り値は、innerHTML（）メソッドを使用してID「Sample」の段落に表示されます。
function countNodes() {
var x = document.getElementById("DIV1").childNodes.length;
document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
} -
HTMLDOMスタイルのflexプロパティ
HTML DOMスタイルのflexプロパティは、displayプロパティがflexに設定されている要素の柔軟な長さを設定または返すために使用されます。これは、flexGrow、flexShrink、およびflexBasisのプロパティを操作するために使用されます。 以下は、-の構文です。 フレックスプロパティの設定- object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit" 以下は値です- 値 説明 flex-grow 指定された数だけ柔軟なアイテム
-
HTMLDOMスタイルjustifyContentプロパティ
HTML DOM justifyContentプロパティは、使用可能なすべてのスペースを使用しない場合に、フレックスアイテムを主軸上で水平方向に整列させるために使用されます。 以下は、-の構文です。 justifyContentプロパティの設定- object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit" 上記の特性は次のように説明されます- 値 説明 flex-start これは、コンテナの先頭にア