JavaScript 獲取指定 DIV 內子 DIV 數量與 ID 的方法

問題背景

在動態生成的網頁中，我們常需要通過 JavaScript 獲取某個父 div 容器下所有子 div 的數量，並進一步取得它們的 id 屬性。這在處理動態列表、表單驗證或頁面結構分析時非常實用。

核心解法

使用 document.getElementById() 定位父容器，再配合 getElementsByTagName("div") 即可取得所有子 div 集合。該集合的 length 屬性即為子 div 總數，遍歷集合可讀取每個元素的 id。

代碼示例

<script>
function getChildDivs() {
    var parent = document.getElementById("f1");
    var childDivs = parent.getElementsByTagName("div");
    console.log("子 div 總數：" + childDivs.length);
    for (var i = 0; i < childDivs.length; i++) {
        console.log("第 " + (i+1) + " 個子 div 的 id：" + childDivs[i].id);
    }
}
</script>

HTML 結構範例

<div id="f1">
    <input id="btn1" value="獲取子 div 的 id" type="button" onclick="getChildDivs()" />
    <div id="z1"><p><a href="#">ggggg</a></p></div>
    <div id="z2"><div id="z5">hhhhh</div></div>
    <div id="z3"></div>
</div>

執行結果

點擊按鈕後，控制台將輸出：

• 子 div 總數：3
• 第 1 個子 div 的 id：z1
• 第 2 個子 div 的 id：z2
• 第 3 個子 div 的 id：z3

注意事項

getElementsByTagName 會遞歸查找所有後代 div，若僅需直接子元素，可改用 children 屬性配合標籤名過濾，或使用 querySelectorAll(":scope > div")（現代瀏覽器支援）。