为何querySelectorAll会遗漏隐式text类型的input元素？

1. 为什么querySelectorAll('input[type="text"]')会忽略隐式text类型的input？ #

这是因为CSS的属性值精确选择器（[attribute="value"]）只会匹配那些在HTML源码中显式声明了该属性及对应值的元素。

对于<input>元素来说，虽然浏览器会默认把它的DOM属性type设置为text，但在HTML层面它并没有type属性。querySelectorAll严格遵循CSS选择器的规则，只会检查元素的HTML属性，而非DOM运行时的动态属性值——所以没有显式写type="text"的input就不会被匹配到。

你提供的示例输出也验证了这一点：第一个input的DOMtype确实是text，但它没有HTMLtype属性，因此不会被[type="text"]选中。

2. 能定位隐式text类型input且排除非text类型的查询语句吗？ #

当然可以！你可以结合:not()伪类来实现，目标选择器如下：

input:not([type]), input[type="text"]

这个选择器的逻辑很清晰：

• input:not([type])：选中所有没有显式声明type属性的input（也就是隐式text类型的）
• input[type="text"]：选中所有显式声明type="text"的input

两者结合就能覆盖所有text类型的input，同时自动排除那些设置了其他type（比如password、email等）的input。

验证示例 #

把你原来的JavaScript代码修改为使用这个新选择器：

var output = document.getElementById('output');
var textInputs = document.querySelectorAll('input:not([type]), input[type="text"]');
output.innerText = 'input:not([type]), 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;

HTML和CSS保持不变，运行后输出会变成：

input:not([type]), input[type="text"] - 2 elements
input - 2 elements

First input type: text

这样就成功选中了所有text类型的input，不管是隐式还是显式声明的。

内容的提问来源于stack exchange，提问作者crenshaw-dev