Javascript 为什么文本类型上的querySelectorAll会丢失隐式文本类型的输入？

我有一个普通的

元素

---

我希望

document.querySelectorAll（'input[type=“text”]”）

能够检索（至少）该输入，因为

但是

querySelectorAll

不会返回该输入，除非我显式设置

type=“text”

我有两个问题：

为什么QuerySelector会忽略带有隐式

type=“text”

的输入

是否有针对隐式类型为

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\n第一个输入类型：'+输入[0]。类型
#输出{
字体系列：monospace；
}
属性选择器不考虑无效或缺失的默认值。只有在标记中明确指定了属性时，它们才会匹配

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


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\n第一个输入类型：'+输入[0]。类型
#输出{
字体系列：monospace；
}
属性选择器不考虑无效或缺失的默认值。只有在标记中明确指定了属性时，它们才会匹配

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


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\n第一个输入类型：'+输入[0]。类型
#输出{
字体系列：monospace；
}


为什么QuerySelector会忽略隐式type=“text”的输入

由于该属性是隐式的，因此元素上不存在该属性，因此属性选择器与该属性不匹配

是否有一个查询以隐式类型为text的输入为目标，该输入排除了所有类型为nottext的输入

匹配完全没有类型属性的元素


console.log(
document.querySelectorAll（“输入[type=text]，输入：not（[type]）”）。长度，
“匹配元素”
);
input[type=text]，
输入：非（[类型]）{
背景：蓝色；
}





为什么QuerySelector会忽略隐式type=“text”的输入

由于该属性是隐式的，因此元素上不存在该属性，因此属性选择器与该属性不匹配

是否有一个查询以隐式类型为text的输入为目标，该输入排除了所有类型为nottext的输入

匹配完全没有类型属性的元素


console.log(
document.querySelectorAll（“输入[type=text]，输入：not（[type]）”）。长度，
“匹配元素”
);
input[type=text]，
输入：非（[类型]）{
背景：蓝色；
}




以下是一些答案：

正如许多人已经提到的，
querySelectorAll
需要显式的类型来匹配它

您可能希望使用代码段中的代码“过滤”查询选择器all的结果

第三个答案：

使用
.setAttribute（“type”，“text”）
在没有属性的元素上显式添加属性


//在没有“type=”text“的文件上添加
document.querySelectorAll（'input:not（[type]））.forEach（function（elm）{
elm.setAttribute（“类型”、“文本”）；
});
//输出
var inputs=document.querySelectorAll（'input[type=“text”]”）；
document.getElementById（'output'）.innerText+='input[type=“text”]-'+inputs.length+'elements'

以下是一些答案：

正如许多人已经提到的，
querySelectorAll
需要显式的类型来匹配它

您可能希望使用代码段中的代码“过滤”查询选择器all的结果

第三个答案：

使用
.setAttribute（“type”，“text”）
在没有属性的元素上显式添加属性


//在没有“type=”text“的文件上添加
document.querySelectorAll（'input:not（[type]））.forEach（function（elm）{
elm.setAttribute（“类型”、“文本”）；
});
//输出
var inputs=document.querySelectorAll（'input[type=“text”]”）；
document.getElementById（'output'）.innerText+='input[type=“text”]-'+inputs.length+'elements'

因为它是一个属性选择器。如果属性不存在，则它不等于
“text”
。