HTML DOM childNodesプロパティとは？構文と使い方をサンプルコード付きで解説
HTML DOMのchildNodesプロパティは、あるノードが持つすべての子ノードのコレクションを、NodeListオブジェクトの形式で返します。返されるノードは、HTMLドキュメント内に出現する順序どおりに並んでおり、0から始まるインデックス番号を使って個々のノードへアクセスできます。このプロパティは読み取り専用です。
特に注意したいのは、テキスト中の空白（ホワイトスペース）やコメントも1つのノードとしてカウントされるという点です。意図しないノードが含まれる原因になるため、実務でもよくつまずくポイントといえます。
childNodesプロパティの構文
childNodesプロパティの基本構文は以下のとおりです。
elementNodeReference.childNodes;
childNodesプロパティの使用例
ここで、HTML DOMの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>要素を作成し、その内部に2つの段落（<p>要素）を配置しました。さらに、他の要素と区別しやすいように、青色のボーダーとマージンを設定しています。ここで重要なのは、コードを読みやすくするために各要素ごとに改行しているため、<div>タグの中に合計3つの空白（ホワイトスペース）ノードが自動的に生成されているという点です。
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()関数の中では、getElementById()メソッドを使ってidが「DIV1」の要素（この例では<div>要素）を取得し、そのchildNodes.lengthプロパティの値を変数xに代入しています。
<div>タグの内部には3つの空白ノードと2つの<p>要素が存在するため、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";
}
-
HTML DOM スタイルのflexプロパティとは？使い方と設定例をわかりやすく解説
HTML DOM スタイルのflexプロパティとはHTML DOM の flex プロパティは、display プロパティが flex に設定されている要素に対して、柔軟な伸縮サイズを設定または取得するために使用されるプロパティです。このプロパティを利用することで、flexGrow（伸びる比率）、flexShrink（縮む比率）、flexBasis（基本サイズ）の3つのプロパティをまとめて操作できます。flexプロパティの構文flexプロパティを設定する場合の基本的な構文は以下の通りです。object.style.flex = flex-grow flex-shrink flex-basis|
-
HTML DOMのjustifyContentプロパティとは?使い方と設定値を徹底解説
HTML DOM justifyContentプロパティとは HTML DOM の justifyContent プロパティは、フレックスコンテナ内のフレックスアイテムが利用可能なスペースをすべて使い切っていない場合に、主軸(横方向)に沿ってアイテムをどのように配置するかを指定するために使用されるプロパティです。JavaScript を使えば、動的にこの配置方法を変更することもできます。 justifyContentプロパティの構文 justifyContent プロパティを設定する際の基本構文は以下の通りです。 object.style.justifyContent = flex-star