document.getElementById()一次只支持一个名称，并且只返回一个节点而不是节点数组。您有几种不同的选择：

1. 您可以实现自己的函数，该函数接受多个 id 并返回多个元素。
2. 您可以使用document.querySelectorAll()它允许您在 CSS 选择器字符串中指定多个 id。
3. 您可以在所有这些节点上放置一个通用类名，并document.getElementsByClassName()与单个类名一起使用。

每个选项的示例：

doStuff(document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4"));

或者：

// put a common class on each object
doStuff(document.getElementsByClassName("circles"));

或者：

function getElementsById(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.push(item);
        }
    }
    return(results);
}

doStuff(getElementsById("myCircle1 myCircle2 myCircle3 myCircle4"));

这行不通，getElementById只会按时间查询一个元素。

您可以document.querySelectorAll("#myCircle1, #myCircle2")用于查询多个元素。

ES6 或更新版本

使用新版本的 JavaScript，您还可以将结果转换为数组以轻松对其进行遍历。

例子：

const elementsList = document.querySelectorAll("#myCircle1, #myCircle2");
const elementsArray = [...elementsList];

// Now you can use cool array prototypes
elementsArray.forEach(element => {
    console.log(element);
});

如何在 ES6 中查询 ID 列表

如果您有一组 ID，另一种简单的方法是使用该语言来构建您的查询，例如：

const ids = ['myCircle1', 'myCircle2', 'myCircle3'];
const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));

不，这行不通。

document.getElementById() 方法只接受一个参数。

但是，您可以始终为元素设置类并getElementsByClassName()改为使用。现代浏览器的另一个选择是使用querySelectorAll()方法：

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");

我建议使用 ES5 数组方法：

["myCircle1","myCircle2","myCircle3","myCircle4"] // Array of IDs
.map(document.getElementById, document)           // Array of elements
.forEach(doStuff);

然后doStuff将为每个元素调用一次，并将接收 3 个参数：元素、元素数组内元素的索引和元素数组。

getElementByID 就是这样 - 通过 id 获取元素。

也许你想给这些元素一个circle类getElementsByClassName