Javascript(vanilla)-如何在使用querySelectorAll时指定元素的类型

Question

使用querySelecterAll（）时，如何指定元素的类型？例如，我想选择表单中type=text的所有输入字段。不是为了样式，而是为了功能。

这就是我现在拥有的：

var inputGroup = document.getElementById('contactForm');
var inputs = inputGroup.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("blur", checkInput);
}
function checkInput() {
  this.value === "" ? this.className = "error" : this.className = "valid";
}

现在，我还瞄准了类型设置为submit、radio等的输入。但我只想瞄准类型设置为text的输入元素。

Answer 1

您可以在对querySelectorAll:的调用中直接使用属性选择器语法

var inputs = inputGroup.querySelectorAll('input[type="text"]');

然而，这可能会错过根本没有指定type属性的<input>标记。你也可以通过在选择器中不使用<input>标签来解决这个问题：

var inputs = inputGroup.querySelectorAll('input[type="text"],input:not([type])');