在前端开发中，获取 DOM 元素是操作页面内容的基础。下面这段代码展示了多种常用的 DOM 元素获取方式，我们将逐一解析其用法、特点，并汇总成方便查阅的表格。
代码示例与方法解析
先看完整代码（已简化核心部分）：
<!DOCTYPE html>
<html>
<body>
<div class="div1">111</div>
<div class="div1">222</div>
<div class="div1">333</div>
<div class="div1">444</div>
<div class="div2"></div>
<div class="div3"></div>
<span class="span1"></span>
<div id="div5">我是设置了id选择器的div5</div>
<script>
// 1. querySelector：通过CSS选择器获取第一个匹配元素
var div2 = document.querySelector(".div2");
console.log(div2); // 输出：<div class="div2"></div>
// 2. getElementById：通过id获取元素（唯一）
var div5 = document.getElementById("div5");
console.log(div5); // 输出：<div id="div5">我是设置了id选择器的div5</div>
// 3. getElementsByClassName：通过类名获取元素集合
var div1 = document.getElementsByClassName("div1");
console.log(div1); // 输出：HTMLCollection(4) [div.div1, div.div1, div.div1, div.div1]
console.log(div1[2]); // 输出：<div class="div1">333</div>（索引从0开始）
// 4. getElementsByTagName：通过标签名获取元素集合
var divs = document.getElementsByTagName('div');
console.log(divs); // 输出：HTMLCollection(6) [div.div1, div.div1, div.div1, div.div1, div.div2, div.div3]
console.log(divs[5]); // 输出：<div class="div3"></div>（第6个div，索引5）
// 5. querySelector：再次演示（获取第一个.div1）
var div111 = document.querySelector('.div1');
console.log(div111); // 输出：<div class="div1">111</div>
// 6. 获取html和body元素
console.log(document.documentElement); // 输出：<html>...</html>
console.log(document.body); // 输出：<body>...</body>
</script>
</body>
</html>1. getElementById()：通过 ID 获取元素
-
语法 ：
document.getElementById(id) -
参数 ：
id（字符串，元素的 id 属性值） -
返回值 ：匹配的单个 Element 对象 ；若未找到，返回
null。 -
特点：id 在页面中应唯一，因此是最快的获取方式之一。
2. getElementsByClassName()：通过类名获取元素集合
-
语法 ：
document.getElementsByClassName(className) -
参数 ：
className（字符串，元素的 class 属性值） -
返回值 ：HTMLCollection 类数组对象（动态更新，包含所有匹配元素）。
-
特点 ：需通过索引访问具体元素（如
div1[2]）；集合会随 DOM 变化自动更新。
3. getElementsByTagName()：通过标签名获取元素集合
-
语法 ：
document.getElementsByTagName(tagName) -
参数 ：
tagName（字符串，HTML 标签名，如'div'、'span'） -
返回值 ：HTMLCollection 类数组对象（动态更新，包含所有该标签的元素）。
-
特点：可获取页面中所有指定标签，同样需索引访问。
4. querySelector()：通过 CSS 选择器获取第一个匹配元素
-
语法 ：
document.querySelector(selector) -
参数 ：
selector（字符串，CSS 选择器，如'.class'、'#id'、'div'） -
返回值 ：第一个匹配的 Element 对象 ；若未找到，返回
null。 -
特点：灵活强大，支持所有 CSS 选择器，但仅返回第一个匹配项。
5. document.documentElement与document.body：直接获取根元素
-
document.documentElement：直接获取页面的<html>根元素。 -
document.body：直接获取页面的<body>元素。
方法汇总表格
|--------------------------------|----------------------------------------------|--------------|--------------------|--------------------------------------------|
| 方法 / 属性 | 语法 | 参数类型 | 返回值类型 | 特点 / 注意事项 |
| getElementById() | document.getElementById(id) | 字符串（id） | Element 或 null | id 需唯一，返回单个元素，性能最优。 |
| getElementsByClassName() | document.getElementsByClassName(className) | 字符串（class） | HTMLCollection（动态） | 返回类数组集合，需索引访问，集合随 DOM 动态更新。 |
| getElementsByTagName() | document.getElementsByTagName(tagName) | 字符串（标签） | HTMLCollection（动态） | 返回所有指定标签的集合，需索引访问，集合随 DOM 动态更新。 |
| querySelector() | document.querySelector(selector) | 字符串（CSS 选择器） | Element 或 null | 支持所有 CSS 选择器，仅返回第一个匹配元素，灵活但性能略低于 ById。 |
| document.documentElement | 直接访问 | 无 | Element（） | 直接获取页面根元素。 |
| document.body | 直接访问 | 无 | Element（） | 直接获取页面元素。 |
总结
-
若需唯一元素 且有 id：优先用
getElementById()。 -
若需多个元素 （类名 / 标签）：用
getElementsByClassName()或getElementsByTagName()。 -
若需复杂选择器 （如后代、伪类）：用
querySelector()（仅第一个）。 -
直接获取
<html>或<body>：用document.documentElement或document.body。