JavaScript childrenプロパティで全ての子の要素を取得する

2023年8月7日

環境
Google Chrome　 115.0.5790.170（Official Build）（64 ビット）
Windows 11 Pro 64bit

構文
const 変数名 = document.getElementById(タグのID名);
変数 = 要素.children;
指定した要素の全ての子要素(HTMLCollection)を取得します。
childrenプロパティに似た名前にchildnodesプロパティがありますが、
childnodesプロパティは要素以外のノードも取得します。

使用例

<!DOCTYPE html>
<html>
<body>

<div id="div1">
      <input type="text" value="東" class="class1" maxlength="6">
</div><br>
<input type="button" value="変更" onclick="funA()">

<script>

function funA(){
    // 取得したdiv1
      const div1 = document.getElementById("div1");
      const child1 = div1.children;

      if (child1.item(0).value == "東"){
            for (let i=0;i<child1.length;i++){
        // valueに値を設定
                  child1.item(i).value = "西";
            }
      }else{
            for (let i=0;i<child1.length;i++){
                  child1.item(i).value = "東";
            }
      }
}
　

</script>

</body>
</html>

実行結果
変更ボタンを押下すると、テキストボックス内の文字を変化させます

JavaScript

Posted by arkgame

関連記事: