label标签本身不支持检索，其作用是语义化关联表单控件与描述文字；所谓“内容检索”实为借助其结构特征（如包裹文本或for属性）在JavaScript中实现定位与筛选。
label 标签本身不支持检索，别被名字误导
label 是语义化标签，作用是关联表单控件（如 input、textarea）与描述文字，点击文字可聚焦/激活对应控件。它**不提供搜索、过滤或 DOM 查找能力**。所谓“配合实现内容检索”，实际是借助 label 的结构特征（比如包裹关键词、绑定 for 属性），在 JavaScript 检索逻辑中作为定位锚点或数据载体使用。
用 label 包裹关键词 + querySelectorAll 快速筛选
常见做法是把可检索的文本内容放在 label 内（尤其用于选项描述），再用 JS 遍历匹配。例如：
<label>用户登录</label> <label>密码重置</label> <label>邮箱验证</label>
检索“密码”时可这样写：
const matches = document.querySelectorAll('label');
const results = Array.from(matches).filter(el =>
el.textContent.includes('密码')
);
- 注意：必须用
Array.from()或展开语法转为数组，否则NodeList没有filter方法 -
textContent比innerText更可靠——它返回所有文本节点内容，不含样式影响，且兼容性更好 - 若
label里混有子元素（如<span>），textContent仍能取全，但需留意是否含冗余空格或换行
利用 for 属性绑定 ID 做精准定位检索
当 label 通过 for="xxx" 关联真实表单元素时，可以反向查出目标控件并高亮/聚焦：
立即学习“前端免费学习笔记（深入）”；
<label for="search-input">搜索关键词</label> <input id="search-input" type="text">
输入关键词后，可这样定位关联的 label 和控件：
const inputId = 'search-input';
const label = document.querySelector(`label[for="${inputId}"]`);
const control = document.getElementById(inputId);
if (label) label.style.backgroundColor = '#ffeb3b';
-
for值必须严格等于目标元素的id，大小写敏感，不能有空格 - 多个
label可指向同一控件（合法但少见），此时querySelector只返回第一个，要用querySelectorAll+ 循环处理 - 若控件无
id，for属性失效，label退化为普通内联容器
别忽略 label 的可访问性副作用
用 label 实现“检索 UI”时，屏幕阅读器会把 label 文本作为关联控件的说明播报。如果只是拿它当纯展示容器，可能造成语义混乱：
- 纯展示不用交互？改用
span或div+aria-label更干净 - 真要保留
label结构又不想关联控件？删掉for和嵌套的表单元素，但需确认设计是否真需要其默认焦点行为 - 检索结果动态插入 DOM 时，新增的
label若没配对控件，会被读作“未命名控件”，干扰辅助技术体验
真正要做的不是让 label 变成搜索引擎，而是把它当作结构清晰、语义明确的文本锚点——检索逻辑在 JS 里，label 只负责提供稳定、可预测的 DOM 路径和文本源。
