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

JavaScriptで子ノードの数を取得する方法

JavaScriptでは、children.lengthプロパティを使うことで、要素が持つ子ノード（子要素）の数を簡単に取得できます。この記事では、実際のコード例を使って、その基本的な使い方を解説します。

children.lengthとは

childrenは、ある要素の子要素（HTMLコレクション）を返すプロパティです。さらに.lengthを付けることで、子要素の総数を数値として取得できます。

例えば、<ul>タグの中にある<li>要素の個数を知りたい場合などに便利です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label>
科目名の一覧は以下の通りです：
</label>
<ul>
<li>JavaScript</li>
<li>MySQL</li>
<li>MongoDB</li>
<li>Java</li>
<li id="subjectName">Python</li>
</ul>
<script>
    var arrayValueOfSubject =
    document.getElementById('subjectName').parentNode;
    console.log("子ノードの数は=" + arrayValueOfSubject.children.length);
</script>
</body>
</html>

プログラムの実行方法

上記のコードを「index.html」などの任意のファイル名で保存します。その後、VSCodeエディター上でファイルを右クリックし、「Open with Live Server」を選択して実行してください。

実行結果

このプログラムを実行すると、コンソールには以下の出力が表示されます。

子ノードの数は=5

JavaScriptで子ノードの数を取得する方法

コードのポイント解説

  • getElementById('subjectName')：id属性が「subjectName」である要素（この例ではPythonのリスト項目）を取得します。
  • parentNode：取得した要素の親ノード、つまり<ul>要素を参照します。
  • children.length：親ノードである<ul>が持つ子要素（5つの<li>）の数を返します。

なお、childNodesを使用した場合はテキストノードなども含まれるため、純粋な要素の数を取得したい場合はchildrenを使用するのがおすすめです。

  1. 【JavaScript入門】文字列を繰り返す方法 – Array()とjoin()を組み合わせた実装例

    JavaScriptである文字列を指定した回数だけ繰り返して表示したい場合、Array()コンストラクタとjoin()メソッドを組み合わせることで簡単に実現できます。 仕組みの解説 new Array(value + 1)は、要素数が「value + 1」個の空の配列を生成します。この空の配列に対してjoin(this)を実行すると、各要素の間に区切り文字として自分自身（対象の文字列）が挿入されます。要素が value + 1 個あれば間は value 個できるため、結果的に元の文字列が value 回繰り返されるという仕組みです。 サンプルコード 以下に実際のコード例を示します。 <!

  2. JavaScriptでDOMノードのすべての子要素を一括削除する方法

    JavaScriptでDOMノードからすべての子要素を削除したい場合は、親要素のinnerHTMLに空文字列（''）を設定するのが最もシンプルで手軽な方法です。これにより、その要素の中身が丸ごとクリアされます。 サンプルコード 実際に動作するコードを見てみましょう。ボタンをクリックすると、赤い枠のボックス内の子要素がすべて削除される仕組みです。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="U