html 选择器API使用

2026-04-22 15:00:13 322阅读 0评论

用选择器API在网页里“点名”：高效精准地定位与操作元素

在网页里想要精准“点名”元素，不靠类名大海捞针，也不依赖全局ID，选择器API（如 document.querySelectorAll）是你的实用工具箱。它允许你按标签、属性、伪类与层级关系精准匹配元素，快速筛选、遍历和操作DOM，让代码更简洁、维护更高效。

从“找人”到“找元素”：场景化引入

想象你在做表单校验，需要同时处理“姓名”和“邮箱”两个输入项，但这两个字段的类名各不相同；或者在筛选文章列表时，想把“标题”和“发布日期”分别取出。这种时候，用选择器API按属性匹配（如 input[name="name"]、input[name="email"]）或组合选择器（如 div.article h2, div.article span.date）就能一次搞定，比硬找ID或写多个独立选择更高效。

核心用法与实用技巧

1. 选择节点与查询集合

节点选择：document.querySelector(selector) 返回匹配的第一个元素。
集合选择：document.querySelectorAll(selector) 返回一个NodeList，可直接遍历处理。

提示：NodeList不是数组，但支持forEach等方法；若需数组特性，可用 [...document.querySelectorAll(...)] 或 Array.from()。

2. 按属性选择

属性名匹配：input[type="email"]
属性值匹配：input[value="submit"]
属性包含匹配：a[href*=".com"]（匹配包含特定子串的属性值）
属性以...开头/结尾：a[href^="https://], a[href$=".jpg"]

3. 伪类与伪元素

状态伪类：:hover, :focus, :checked, :enabled, :disabled
伪元素：:before, :after
组合使用：:nth-child(even), :nth-of-type(odd)

4. 层级与后代选择

后代选择：div.article > p（直接子节点）、div.article p（所有后代）
子元素过滤：div.article ul > li:nth-child(2)（只取直接子元素的第二个）
层级组合：a:hover div.container p（链式匹配）

5. 组合选择器的进阶用法

并集选择：同时选取多个匹配项（用逗号分隔）
子集与交集：通过空格与+、~定义前后关系，如 nav + main、li ~ ul

实战：表单校验与数据提取

假设有一个登录表单：

<form class="login">
  <input type="text" name="username" required>
  <input type="password" name="password" required>
  <input type="submit" value="登录">
</form>

你想在点击提交时验证必填项并阻止默认提交，可以这样写：

document.querySelector('.login').addEventListener('submit', function(e) {
  const username = this.querySelector('input[name="username"]');
  const password = this.querySelector('input[name="password"]');

  if (!username.value.trim()) {
    username.classList.add('invalid');
    return false;
  }
  if (!password.value.trim()) {
    password.classList.add('invalid');
    return false;
  }
  // 其他校验通过后提交表单
  this.submit();
});

这个示例展示了如何在表单提交时，通过选择器定位并校验必填字段，并在不使用全局ID的前提下保持代码清晰、可维护。