如何获取子级input checkbox元素？优化多层firstChild写法

先明确你的当前写法（基于描述推测） #

通常多层firstChild的写法大概是这样：

const unitDiv = document.getElementById('unitDiv');
const checkbox = unitDiv.firstChild.firstChild; // 依赖深层DOM结构的链式调用
checkbox.style.display = 'none';

对应的HTML结构类似：

<div id="unitDiv">
  <div class="container">
    <input type="checkbox" name="unit-check">
  </div>
</div>

更简洁的实现方式 #

因为已知unitDiv内仅有一个input[type="checkbox"]，推荐以下几种更健壮、易读的写法：

1. 用querySelector直接定位（首选）

利用CSS选择器直接匹配目标元素，写法简洁且不依赖DOM嵌套层级：

// 直接从文档中获取
const checkbox = document.querySelector('#unitDiv input[type="checkbox"]');
checkbox.style.display = 'none';

// 如果已经拿到了unitDiv对象，也可以在它上面调用querySelector
const unitDiv = document.getElementById('unitDiv');
const checkbox = unitDiv.querySelector('input[type="checkbox"]');
checkbox.style.display = 'none';

2. 用getElementsByTagName配合类型筛选（兼容旧场景）

如果需要兼容非常老的浏览器，querySelector支持不佳时可以用这个方法：

const unitDiv = document.getElementById('unitDiv');
// 获取unitDiv下所有input，再筛选出checkbox
const checkbox = Array.from(unitDiv.getElementsByTagName('input'))
  .find(input => input.type === 'checkbox');
checkbox.style.display = 'none';

3. 纯CSS隐藏（无需JS）

如果只是需要隐藏该checkbox，不需要后续JS操作它，直接用CSS更高效：

#unitDiv input[type="checkbox"] {
  display: none;
}

优化原因 #

多层firstChild的链式调用非常脆弱：DOM结构只要有微小变动（比如新增换行、空格、嵌套元素），就会导致获取到错误的元素甚至null，而上述方法要么直接通过元素特征定位，要么不依赖嵌套层级，健壮性和可读性都远高于原写法。

内容的提问来源于stack exchange，提问作者Khant Min Si Thu