原生JavaScript DOM选择器详解：ID、Name、Tag与Class
本文详细解析原生JavaScript中的四种核心DOM选择器：getElementById、getElementsByName、getElementsByTagName及getElementsByClassName。文章逐一介绍各方法的语法格式、参数含义及适用场景，重点说明getElementsByName在表单元素中的特殊行为，以及后三种方法在DOM元素上调用时的子集获取限制，帮助开发者准确掌握基础选择器的使用规范。
原生JavaScript DOM选择器概述
原生JavaScript提供了四种基础的DOM元素获取方法，分别是getElementById、getElementsByName、getElementsByTagName以及getElementsByClassName。接下来将对这四种选择器的具体用法进行逐一解析。
getElementById：通过ID获取元素
1. getElementById（通过ID获取元素）
调用格式为document.getElementById("Id")，其中"Id"参数代表目标元素的id属性值。该方法返回单个元素节点。
getElementsByName：通过Name属性获取元素
2. getElementsByName（通过name属性获取元素）
调用格式为document.getElementsByName("Name")，其中"Name"参数代表目标元素的name属性值。此方法通常用于处理表单数据提交场景。当元素为form、img、iframe、applet、embed或object时，若设置了name属性，浏览器会自动在Document对象中创建一个以该name值为名的属性。因此，开发者可以直接通过document.domName的形式引用对应的DOM对象。
getElementsByTagName：通过标签名称获取元素
3. getElementsByTagName（通过标签名称获取元素）
调用格式为document.getElementsByTagName(TagName)，其中TagName参数代表要获取的标签名称。若TagName设置为"*"，则表示获取文档中所有元素。此外，该方法也可在具体的DOM元素实例上调用，此时仅返回该DOM元素内部的子集元素，而非整个文档。
getElementsByClassName：通过CSS类名获取元素
4. getElementsByClassName（通过CSS类名获取元素）
调用格式为document.getElementsByClassName(ClassName)，其中ClassName参数代表要获取的CSS类名称。若需同时获取多个类的元素，可在类名之间使用空格分隔。例如，document.getElementsByClassName("class2 class1")将返回同时拥有class1和class2样式的元素集合。与getElementsByTagName类似，该方法也可在DOM元素实例上调用，此时仅返回该DOM元素内部的子集元素。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>我是通过标签获取</div>
<div id="box">我是通过id获取</div>
<div class="box1">我是通过class获取</div>
<form action="" name="box2">
我是通过name获取
</form>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName("div");
var box = document.getElementById("box");
var box1 = document.getElementsByClassName("box1");
var box2 = document.getElementsByName("box2");
</script>
</html>以上即为原生JavaScript中四种基础选择器的全面解析内容，供参考使用。
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系：Web前端三件套怎么协作
2026-11-04 15:41:40