是否可以像jQuery一样通过id选择元素？

Question

目前我选择的元素jQuery('a#encode-url-button, a#decode-url-button'),是否可以在不创建新函数的情况下选择纯js中的相同元素？有点像document.getElementById('encode-url-button, decode-url-button').onclick = function...？

Answer 1

是的,有document.querySelectorAll.它接受一个CSS选择器.大多数现代浏览器都支持它.

如果你真的需要支持IE7及更早版本,那么你当然可以做两次getElementById调用并抛弃元素,如果它们不是锚点.(这是选择器的a#someid作用.)

如果您要对元素进行操作,则需要遍历结果列表querySelectorAll,因为DOM API没有jQuery具有的"set theory"方向.例如:

var list = document.querySelectorAll("#encode-url-button, #decode-url-button");
var index;
for (index = 0; index < list.length; ++index) {
   list[index].onclick = clickhandler;
}
function clickHandler() {
    // ....
}

(我不提倡像这样使用DOM0处理程序addEventListener,而是使用相反的方法,但正如你onclick在问题中引用的那样...)

FWIW,99.99%的时间,将id选择器与标签选择器(a#someid)组合起来是没有意义的,因为id值是唯一的.只是#someid通常更好.添加标签不会使任何事情变得更快; 事实上,它让事情变得更慢.这样做的唯一原因是,有时候元素会有一个标签(比方说a),有时候是另一个标签(比如说,我不知道div),你只想拥有一个而不是另一个.很边缘的情况......