如何用单条getElementByID规则匹配前缀相同的多个元素ID

使用CSS属性前缀选择器结合document.querySelectorAll()即可实现需求，[id^="inner-main-container-"]规则会自动匹配所有id以inner-main-container-开头的元素。

示例代码 #

// 执行后返回包含所有匹配元素的NodeList集合
const contents = document.querySelectorAll('[id^="inner-main-container-"]');

// 按下标访问对应元素，顺序和元素在DOM文档中的出现顺序一致
const content = contents[0]; // 对应id为inner-main-container-one的元素
const contentone = contents[1]; // 对应id为inner-main-container-two的元素
const contenttwo = contents[2]; // 对应id为inner-main-container-three的元素

如果需要对匹配到的元素使用数组的内置方法（如map、filter等），可以把返回的NodeList转为普通数组：

const contentArray = Array.from(document.querySelectorAll('[id^="inner-main-container-"]'));

注意：原生DOM获取元素的方法名为getElementById，末尾的d为小写，你问题示例代码中的大写D写法会触发语法错误，无法正常获取元素。

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