JavaScript childrenプロパティで全ての子の要素を取得する
環境
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="変更"> <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>
実行結果
変更ボタンを押下すると、テキストボックス内の文字を変化させます