javascript - 是否可以像 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 选择器。最现代的浏览器 support it .

如果您确实需要支持 IE7 及更早版本，那么您当然可以只执行两次 getElementById 调用，并丢弃不是 anchor 的元素。 (这就是选择器 a#someid 的作用。)

如果要对元素进行操作，则需要循环遍历 querySelectorAll 的结果列表，因为 DOM API 没有 jQuery 所具有的“集合理论”方向。例如:

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)，而您只想如果它有一个但没有另一个则得到它。非常边缘的情况...