使用querySelectorAll和innerHTML

Question

我希望在重新提交表单时使用类似以下的方法来清除错误信息:

document.querySelectorAll("#form-error-name, #form-error-email, #form-error-tel, #form-error-dob, #form-error-password, #form-error-goal").innerHTML= "";

但是div中的内容没有被清除。我做错了什么吗？

- user2265915

---

querySelectorAll 返回一个元素集合。而 getElementById 只返回一个元素。 - Niet the Dark Absol

Answer 1

该问题需要使用 .value 而不是 .innerHTML，因为在 input 元素上不可用。适当的现代答案应该是：

[... document.querySelectorAll('input')]
  .map(i => i.value = '');

- John Haugeland

Answer 2

您需要遍历结果

    var errors = document.querySelectorAll(
               "#form-error-name, 
                #form-error-email, 
                #form-error-tel, 
                #form-error-dob, 
                #form-error-password, 
                #form-error-goal");

[].forEach.call(errors, function(error) {
  error.innerHTML = '';
});

querySelectorAll 不返回一个数组，而是一个节点列表，它的原型上没有 forEach 方法。

上述循环是在 nodeList 对象上使用数组对象原型上的 forEach 方法。

- atmd

---

可能有必要解释一下结果是一个 NodeList.prototype（而不是 Array.prototype，也没有数组原型方法），这就是为什么你要使用数组的 forEach。 - Klors

虽然这在现代浏览器中可以工作，但没有要求内置方法在给定主机对象作为this时工作（例如，IE 8不喜欢那样），因此对NodeList进行标准的for循环可能是更好的选择（而且可能更快）。;-)请注意，由于forEach必须被shimmed，因此这种特殊情况可能在IE8中工作，因此它不是一个内置方法。 - RobG

@RobG 非常好的观点。由于问题中没有提到浏览器支持，并且他们正在使用querySelectorAll，所以我没有考虑它，但事后看来这是一个重要因素，决定了这是否是一个好答案。我很想看到forEach和for(var i = 0;等循环的性能差异。 - atmd

值得注意的是，只有IE 11不支持NodeList上的forEach。因此，如果您不针对过时的浏览器，则可以摆脱这些花招，并直接在从document.querySelectorAll返回的NodeList上使用forEach。 - Ozil

Answer 3

试试这个：

var x = document.querySelectorAll("#form-error-name, #form-error-email, #form-error-tel");
var i;
for (i = 0; i < x.length; i++) {
    x[i].innerHTML = "";
}

看看这是否有所帮助。

- Gaurav Dave

Answer 4

另一种方法是直接在querySelectorAll的结果上调用forEach，它返回NodeList结果：

query_selector = "#form-error-name, #form-error-email, #form-error-tel, #form-error-dob, #form-error-password, #form-error-goal"
document.querySelectorAll(query_selector).forEach(node => node.innerHTML = "")

- maanijou