getElementById能否同时传入两个ID获取对应的两个DOM元素？

结论 #

你提到的document.getElementById('rectangle', 'to-top')写法无法同时获取两个元素。
getElementById方法原生仅支持接收1个id字符串作为参数，传入的第二个及之后的参数会被直接忽略，最终只会返回匹配第一个id的DOM元素。

可行的实现方案 #

• 方案1：分别调用getElementById（最直观，适合少量id查询）

  两次调用方法分别获取元素，可按需存入数组统一管理：

  const rectangle = document.getElementById('rectangle')
  const toTop = document.getElementById('to-top')
  // 如需统一管理可以放到数组里
  const elements = [rectangle, toTop]
  

• 方案2：使用querySelectorAll批量查询（适合多个id批量查询）

  该方法支持传入CSS选择器语法，多个id用逗号分隔即可，返回值为包含所有匹配元素的NodeList对象：

  // 获取NodeList集合
  const elementList = document.querySelectorAll('#rectangle, #to-top')
  // 如需转成普通数组操作可以用如下写法
  const elementArr = [...elementList]
  // 或者 const elementArr = Array.from(elementList)
  

• 方案3：限定父容器范围查询（适合同父级元素下的子元素查询）

  你的两个元素都在.nav容器下，可以先选中父容器再做子元素查询，缩小查找范围性能更优，也避免全局id重复（不符合规范的场景）的干扰：

  const nav = document.querySelector('.nav')
  const rectangle = nav.querySelector('#rectangle')
  const toTop = nav.querySelector('#to-top')
  

补充说明 #

HTML规范要求页面内id属性必须全局唯一，因此getElementById原生设计为仅返回单个元素，符合DOM API的设计逻辑。

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