如何用JavaScript获取指定div内元素列表并隐藏除首个外的其他元素

先修正你代码里的错误，再补充获取子元素的逻辑：

修正后的完整代码 #

<div id="RandomId">
    <img src="src_1" />
    <img src="src_2" />
    <img src="src_3" />
    ...
    <img src="src_n" />
</div>

<script>
    function handleImages(divID) {
        const div = document.getElementById(divID); // 修正参数大小写：DivID → divID
        if(div) {
            // 获取div下所有直接子元素（仅元素节点，不含空白文本/注释）
            const elements = div.children; 
            // 也可通过CSS选择器获取：div.querySelectorAll('> *')，支持更灵活的筛选（比如只选img：div.querySelectorAll('> img')）

            // 优化遍历：从第2个元素（索引1）开始处理，无需continue
            for (let i = 1; i < elements.length; i++) {
                elements[i].style.display = 'none'; // 修正样式：隐藏用none，不是block
            }
        }
        return null;
    }

    // 调用示例
    handleImages('RandomId');
</script>

关键说明 #

1. 子元素获取方式：
   • div.children：最适配你的场景，只返回div的直接子元素（比如示例里的所有img），自动排除空白文本、注释这类非元素节点
   • div.querySelectorAll('> *')：和children效果接近，用CSS选择器匹配直接子元素，可按需筛选特定标签（比如仅img）
2. 修复的核心错误：
   • 参数大小写不匹配：原代码里的DivID和函数参数divID大小写不一致，会导致无法找到目标div
   • 隐藏样式错误：原代码写了display:block（显示元素），改为display:none才是隐藏逻辑
3. 遍历优化：直接从索引1开始遍历，跳过第一个元素，比用continue更简洁直观

内容的提问来源于stack exchange，提问作者David