javascript - 为什么文本类型上的 querySelectorAll 会错过具有隐式文本类型的输入？

Question

我有一个简单的<input>元素。

我希望document.querySelectorAll('input[type="text"]')（至少）检索该输入，因为默认输入类型是text.

但querySelectorAll除非我明确设置，否则不会返回该输入type="text"。

我有两个问题：

1. 为什么 querySelectorAll 会忽略带有隐含的输入type="text"？
2. 是否有针对隐含类型为text排除所有类型不是类型的输入的输入的查询text？

这是说明问题的示例文档：

var output = document.getElementById('output');

var textInputs = document.querySelectorAll('input[type="text"]');

output.innerText = 'input[type="text"] - ' + textInputs.length + ' elements';

var inputs = document.querySelectorAll('input');

output.innerText += '\ninput - ' + inputs.length + ' elements';

output.innerText += '\n\nFirst input type: ' + inputs[0].type;

#output {
  font-family: monospace;
}

<form>
  <input>
  <input type="text">
  <div id="output"></div>
</form>

这是我的浏览器（Chrome）中的 JavaScript 输出：

input[type="text"] - 1 elements
input - 2 elements

First input type: text

标签： javascripthtmlcss-selectors

Answer 1

属性选择器不考虑无效或缺失值默认值。只有在标记中明确指定了属性时，它们才会匹配。

您仍然可以使用 来解释缺失值默认值input:not([type])，因为input没有属性的元素type通过其缺失值默认值保证为文本输入（除非被脚本改变）。

var output = document.getElementById('output');

var textInputs = document.querySelectorAll('input:not([type]), input[type=text]');

output.innerText = 'input[type="text"] - ' + textInputs.length + ' elements';

var inputs = document.querySelectorAll('input');

output.innerText += '\ninput - ' + inputs.length + ' elements';

output.innerText += '\n\nFirst input type: ' + inputs[0].type;

#output { 
  font-family: monospace; 
}

<form>
    <input>
    <input type="text">
    <input type="number">
    <div id="output"></div>
</form>