javascript - 我可以直接更新所有元素的属性吗

Question

例如：

var inputs = document.querySelectorAll('input[type="checkbox"]');

我想checked在所有输入上设置为 true。这可以像在 jQuery 中那样完成，而不使用 for 循环吗？

Answer 1

querySelectorAll返回一个NodeList。您将需要遍历列表以更改其中的每个项目（jQuery 也在后台使用 .each 循环遍历整个集合）

您可以使用循环（for、while 等），也可以使用原型forEach上的方法Array

https://developer.mozilla.org/en-US/docs/DOM/NodeList#Workarounds

Answer 2

不，如果不对节点进行某种形式的迭代，就无法做到这一点。jQuery 也会遍历节点，它只是对用户隐藏它。

最接近类似 jQuery 的样式是在支持它的浏览器中使用.forEach ^[MDN]：

[].forEach.call(inputs, function() {
    this.checked = true;
});

Answer 3

不使用 for 循环

在某些时候，您将需要某种形式的循环。你只是希望抽象它吗？

NodeLists 是Array-like，所以你可以call或apply方法 from Array.prototype，包括迭代器，如forEach(). 来自 MDN的示例：

另一种不扩展 DOM 的方法：

var forEach = Array.prototype.forEach;

var links = document.getElementsByTagName('a');
forEach.call(links, function(link){ // works in most browsers (please document here if you find browsers where it doesn't)
  link.style.color = '#0F0';
});

但请注意，这甚至forEach() 取决于循环（while在这种情况下）。

Answer 4

使用纯 JavaScript，您可以使用如下querySelectorAll()函数：

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

for(var i=0; i<checkboxes.length; i++) {  checkboxes[i].checked = true; }

不幸的是，这并不能避免循环，我知道你想避免它，它也没有完美的跨浏览器兼容性，可以在这里检查IE 8 只能连接到 CSS 2.1 选择器和 Pre IE8 不被支持除了使用大量代码和避免使用 jQuery，这是最好的。

我知道您想避免使用 jQuery，但是，如果您改变主意，可以尝试以下方法：

$('input[type="checkbox"]').attr('checked', 'checked')

这应该连接到任何复选框输入，并使用 jQueryattr()函数将其属性设置为选中。

如果这不起作用，请尝试为您的复选框提供自己的类名，例如复选框，然后尝试如下：

$('.checkbox').attr('checked', 'checked')

这将有助于解决兼容性问题并避免循环，但如果您不想走 jQuery 路线，请忽略。