本文系统梳理 JavaScript 中的 DOM 选择器。重点对比 HTML5 前的四种传统方法（getElementById、getElementsByName、getElementsByTagName、getElementsByClassName）与 HTML5 新增的 querySelector 和 querySelectorAll。详细解析各方法的返回值类型（Node 与 NodeList）、使用场景及代码示例，帮助开发者准确掌握元素获取技巧。
HTML5 前的传统 DOM 选择器
在 HTML5 标准推出之前，JavaScript 中仅存在以下四种基础的 DOM 选择器方法。
.getElementById("id")：用于通过 ID 获取元素； .getElementsByName("name")：用于通过 name 属性获取元素； .getElementsByTagName("tagname")：用于通过标签名获取元素； .getElementsByClassName(".classname")：用于通过 class 类名获取元素。
相关示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript选择器</title>
<style>
.div{
border: 2px solid red;
}
p{
color: red;
}
</style>
</head>
<body>
<p>id选择器</p>
<div id="first"></div>
<p>name选择器</p>
<div name="first"></div>
<div name="first"></div>
<p>tag标签选择器</p>
<span></span>
<span></span>
<p>css中.class选择器</p>
<div class="div"></div>
<div class="div"></div>
</body>
<script>
document.getElementById("first").innerHTML="<h4>我是id选择器效果</h4>";
document.getElementsByName("first")[0].innerHTML="<h4>我是第一个name选择器效果</h4>";
document.getElementsByName("first")[1].innerHTML="<h4>我是第二个name选择器效果</h4>";
document.getElementsByTagName("span")[0].innerHTML="<h4>我是第一个tag选择器效果</h4>";
document.getElementsByTagName("span")[1].innerHTML="<h4>我是第二个tag选择器效果</h4>";
document.getElementsByClassName("div")[0].innerHTML="<h4>我是第一个.class选择器效果</h4>";
document.getElementsByClassName("div")[1].innerHTML="<h4>我是第二个.class选择器效果</h4>";
</script>
</html>
代码运行效果截图如下：
通过观察运行结果，可以清晰识别各方法返回值的类型差异。
.getElementById("id")：返回单个节点（Node），即第一个匹配该 ID 的元素（注意：ID 在同一文档中应具有唯一性）； .getElementsByName("name")：返回 NodeList 类数组对象； .getElementsByTagName("tagname")：返回 NodeList 类数组对象； .getElementsByClassName(".classname")：返回 NodeList 类数组对象。
HTML5 新增的选择器方法
随着 HTML5 标准的实施，JavaScript 引入了两种新的选择器方法，其语法与 CSS 选择器高度相似： querySelector()：根据指定的选择器规则，返回文档中第一个匹配的元素（返回 Node）； querySelectorAll()：根据指定的选择器规则，返回文档中所有匹配的元素（返回 NodeList）。
新增选择器的示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript选择器</title>
<style>
.div{
border: 2px solid red;
}
p{
color: red;
}
h3{
color: darkblue;
}
</style>
</head>
<body>
<h3>querySelector()根据选择器规则返回第一个符合要求的元素 </h3>
<p>通过id获取单节点</p>
<div id="second"></div>
<p>通过.class获取单节点</p>
<div class="div"></div>
<h3>querySelectorall()根据选择器规则返回所有符合要求的元素 </h3>
<div></div>
</body>
<script>
document.querySelector("#second").innerHTML="<h4>我是通过id选择效果</h4>";
document.querySelector(".div").innerHTML="<h4>我是通过.class选择效果</h4>";
document.querySelectorAll("div")[2].innerHTML="<h4>我是通过tag选择第三个的效果</h4>";
</script>
</html>代码运行效果截图如下：
以上内容涵盖了本文的核心知识点，希望对读者理解 JavaScript 选择器有所帮助，欢迎继续支持本站获取更多技术资源。