在 JavaScript 中，document 对象提供了多种方法来获取 HTML 页面中的 DOM 元素。根据选择方式的不同（ID、类名、标签名、CSS 选择器等），主要可以分为以下几类常用方法：

1. 通过 ID 获取单个元素

‌方法：‌ document.getElementById(id)

• ‌描述‌：根据元素的 id 属性获取‌唯一‌的一个元素。

• ‌返回值‌：匹配的元素对象；如果未找到，返回 null。

• ‌特点‌：

• 效率最高，因为 ID 在文档中应该是唯一的。

• 参数区分大小写。

• ‌示例‌：

  javascript// HTML: <div id="myDiv">Hello</div>var element = document.getElementById("myDiv");if (element) {    console.log(element.innerHTML); // 输出: Hello}

2. 通过 CSS 选择器获取元素（推荐，最灵活）

这是现代开发中最常用的方式，支持所有标准的 CSS 选择器语法（如 .class, #id, tag, [attr], 伪类等）。

A. 获取第一个匹配元素

‌方法：‌ document.querySelector(selector)

• ‌描述‌：返回文档中匹配指定 CSS 选择器的‌第一个‌元素。

• ‌返回值‌：匹配的元素对象；如果未找到，返回 null。

• ‌示例‌：

  javascript// 获取第一个 class 为 "item" 的元素var firstItem = document.querySelector(".item");// 获取 ID 为 "header" 的元素var header = document.querySelector("#header");// 获取第一个带有 name 属性的 inputvar input = document.querySelector("input[name='username']");

B. 获取所有匹配元素

‌方法：‌ document.querySelectorAll(selector)

• ‌描述‌：返回文档中匹配指定 CSS 选择器的‌所有‌元素。

• ‌返回值‌：一个静态的 NodeList 集合（类似数组，但不是 Array，不能直接使用 push/pop 等方法，但可以使用 forEach）。

• ‌示例‌：

  javascript// 获取所有 class 为 "item" 的元素var items = document.querySelectorAll(".item");// 遍历所有匹配元素items.forEach(function(item) {
      item.style.color = "red";
  });

3. 通过类名获取元素集合

‌方法：‌ document.getElementsByClassName(className)

• ‌描述‌：根据元素的 class 属性获取所有匹配的元素。

• ‌返回值‌：一个动态的 HTMLCollection 集合。

• ‌特点‌：

• 返回的是“活”集合，当 DOM 结构变化时，集合会自动更新。

• 如果需要批量操作相同类名的元素，此方法性能较好。

• ‌示例‌：

  javascript// HTML: <div class="box">1</div><div class="box">2</div>var boxes = document.getElementsByClassName("box");for (var i = 0; i < boxes.length; i++) {
      boxes[i].style.backgroundColor = "yellow";
  }

4. 通过标签名获取元素集合

‌方法：‌ document.getElementsByTagName(tagName)

• ‌描述‌：根据 HTML 标签名（如 div, p, span）获取所有匹配的元素。

• ‌返回值‌：一个动态的 HTMLCollection 集合。

• ‌示例‌：

  javascript// 获取页面所有的段落标签var paragraphs = document.getElementsByTagName("p");// 获取页面所有元素（传入 '*'）var allElements = document.getElementsByTagName("*");

5. 通过 Name 属性获取元素集合

‌方法：‌ document.getElementsByName(name)

• ‌描述‌：主要用于表单元素，根据 name 属性获取元素。

• ‌返回值‌：一个 NodeList 集合。

• ‌适用场景‌：常用于获取单选按钮（radio）、复选框或表单输入项。

• ‌示例‌：

  javascript// HTML: <input name="gender" type="radio" value="male">var genders = document.getElementsByName("gender");console.log(genders.length); // 输出匹配的数量

方法对比总结

表格

最佳实践建议

1. ‌优先使用 querySelector / querySelectorAll‌：它们语法灵活，支持复杂的 CSS 选择器，代码可读性高，是现代开发的主流选择。

2. ‌追求极致性能时使用专用方法‌：如果只需要通过 ID 获取元素，getElementById 比 querySelector('#id') 稍快；如果只需要通过类名获取大量元素且需要实时反映 DOM 变化，getElementsByClassName 可能更合适。

3. ‌注意返回值类型‌：

• getElementById 和 querySelector 返回单个对象，可以直接操作属性（如 .style）。

• getElementsBy... 和 querySelectorAll 返回集合，必须通过索引（如 ``）或循环遍历后才能操作具体元素。

4. ‌空值检查‌：在使用获取到的元素前，建议检查是否为 null，以避免报错。

   javascriptvar el = document.querySelector(".maybe-missing");if (el) {
       el.style.display = "none";
   }