querySelector配合属性选择器可精准定位表单控件：按name（如input[name="username"]）、type与属性组合（如inputtype="email"）、data属性（如input[data-field="search-query"]）查找，注意引号使用与空格规范。
用 querySelector 配合属性选择器，能精准定位带特定属性的表单控件，比单纯用标签名或类名更灵活可靠。
查找指定 name 属性的控件
表单中多个控件常共用类型（如多个 input），但 name 唯一标识字段。直接按 name 查最常用：
-
document.querySelector('input[name="username"]')→ 找到 name="username" 的 input -
document.querySelector('select[name="country"]')→ 匹配下拉框，不关心是否被 class 或 id 干扰 - 注意：name 值含特殊字符（如
[]、.）时需加引号，例如input[name="user[profile]"]
按 type 和其他属性组合筛选
单靠 type 不够精确（比如页面有多个 text 输入框），可叠加属性缩小范围：
-
document.querySelector('input[type="email"][required]')→ 找必填邮箱框 -
document.querySelector('input[type="checkbox"][value="newsletter"]')→ 定位值为 newsletter 的复选框 -
document.querySelector('button[type="submit"][disabled]')→ 查找当前被禁用的提交按钮
利用自定义 data 属性精确定位
当控件没有 id 或 name，或需要语义化标记时，推荐在 HTML 中添加 data- 属性：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- HTML 示例：
<input type="text" data-field="search-query" placeholder="搜产品"> - JS 查找：
document.querySelector('input[data-field="search-query"]') - 支持部分匹配：
input[data-field^="search"]（开头是 search）、input[data-field$="query"]（结尾是 query）
注意空格和匹配逻辑
属性选择器对空格敏感，写错会查不到：
-
input[name=login]✅ 可以（无引号，值不含空格/特殊字符） -
input[name=first name]❌ 错误（含空格必须加引号：input[name="first name"]） -
input[type=text][required]✅ 同时满足两个条件（AND 关系） - 不支持 OR（如
[type=text] 或 [type=email]），需用querySelectorAll+ 数组取第一个，或分两次查
只要属性值明确、HTML 标记规范，这种写法稳定且不易受结构变动影响，适合表单自动化操作或动态校验场景。
