前端获取 HTML 元素有多种方式，每种方式都有其适用的场景和特点。以下是常见的几种方式：
1. 根据 ID 获取元素
使用 getElementById() 方法，根据元素的 ID 获取元素。返回的是单个元素对象。
var element = document.getElementById("myId");
2. 根据类名获取元素
使用 getElementsByClassName() 方法，根据类名获取元素。返回的是一个类数组（HTMLCollection）。
var elements = document.getElementsByClassName("myClass");
// 访问第一个元素
var firstElement = elements[0];
3. 根据标签名获取元素
使用 getElementsByTagName() 方法，根据标签名获取元素。返回的是一个类数组（HTMLCollection）。
var elements = document.getElementsByTagName("div");
// 访问第一个元素
var firstElement = elements[0];
4. 使用 querySelector()
使用 querySelector() 方法，返回第一个匹配指定 CSS 选择器的元素。返回的是单个元素对象。
var element = document.querySelector(".myClass");
5. 使用 querySelectorAll()
使用 querySelectorAll() 方法，返回所有匹配指定 CSS 选择器的元素。返回的是一个静态 NodeList。
var elements = document.querySelectorAll(".myClass");
// 访问第一个元素
var firstElement = elements[0];
总结
getElementById(id)：返回具有指定 ID 的单个元素。getElementsByClassName(className)：返回具有指定类名的所有元素，结果是一个类数组（HTMLCollection）。getElementsByTagName(tagName)：返回具有指定标签名的所有元素，结果是一个类数组（HTMLCollection）。querySelector(selector)：返回第一个匹配指定 CSS 选择器的单个元素。querySelectorAll(selector)：返回所有匹配指定 CSS 选择器的元素，结果是一个静态 NodeList。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myId" class="myClass">Element with ID</div>
<div class="myClass">Element with Class</div>
<p>Paragraph</p>
<p>Another Paragraph</p>
<script>
// 根据 ID 获取元素
var elementById = document.getElementById("myId");
console.log(elementById);
// 根据类名获取元素
var elementsByClassName = document.getElementsByClassName("myClass");
console.log(elementsByClassName);
// 根据标签名获取元素
var elementsByTagName = document.getElementsByTagName("p");
console.log(elementsByTagName);
// 使用 querySelector 获取元素
var elementByQuerySelector = document.querySelector(".myClass");
console.log(elementByQuerySelector);
// 使用 querySelectorAll 获取元素
var elementsByQuerySelectorAll = document.querySelectorAll(".myClass");
console.log(elementsByQuerySelectorAll);
</script>
</body>
</html>
