querySelector 和 getElementsByTagName 都是用于在 HTML 文档中选择元素的方法，但它们之间有一些重要的区别：
-
querySelector:
querySelector方法允许您使用 CSS 选择器来选择元素。这意味着您可以选择具有特定类、ID 或其他属性的元素，甚至可以选择嵌套结构中的元素。querySelector方法只返回匹配到的第一个元素。如果有多个元素匹配选择器，它仅返回第一个匹配的元素。- 示例：
document.querySelector(".example")会选择文档中第一个类名为example的元素。
-
getElementsByTagName:
getElementsByTagName方法根据标签名选择元素。它返回指定标签名的所有元素的 HTMLCollection 对象。getElementsByTagName方法会返回所有匹配到的元素，而不仅仅是第一个。- 示例：
document.getElementsByTagName("p")会选择文档中所有的<p>元素。
综上所述， querySelector 更加灵活，可以选择更具体的元素，而 getElementsByTagName 则更适合选择某种特定类型的元素。您可以根据具体的需求选择使用哪种方法来获取元素。
当使用 querySelector 和 getElementsByTagName 时，一个明显的区别在于选择元素的灵活性。下面是一个示例来展示它们之间的差异：
举例
假设我们有以下 HTML 结构：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="container">
<p>第一个段落。</p>
<p class="special">第二个段落。</p>
<span>这是一个 span 元素。</span>
</div>
</body>
</html>
现在我们来比较使用 `querySelector` 和 `getElementsByTagName` 来选择不同元素的区别：
1. 使用 querySelector 选择特定类名的元素：
// 使用 querySelector 选择类名为 "special" 的元素
var specialPara = document.querySelector(".special"); console.log(specialPara.innerHTML); // 输出：第二个段落。
2. 使用 getElementsByTagName 选择所有 <p> 元素：
// 使用 getElementsByTagName 选择所有 <p> 元素
var allPara = document.getElementsByTagName("p");
for (var i = 0; i < allPara.length; i++) {
console.log(allPara[i].innerHTML);
}
// 输出：第一个段落。
// 输出：第二个段落。
在这个示例中，我们使用 querySelector 选择了具有特定类名的元素（类名为 "special" 的 <p> 元素），而使用 getElementsByTagName 则选择了所有的 <p> 元素。通过这个例子，可以看出 querySelector 更适合选择具有特定类名或 ID 的元素，而 getElementsByTagName 则更适合选择某种特定类型的元素。
