GetElementByID - 多个ID

Question

doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4"));

这不起作用,所以我需要逗号或分号才能使其工作吗？

Answer 1

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"));

Answer 2

这不起作用,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(', '));

Answer 3

不,它不会起作用.

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

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

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