原生JavaScript DOM选择器详解:ID、Name、Tag与Class

作者:交互手记

时间:2026-10-30

浏览:456

本文详细解析原生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中四种基础选择器的全面解析内容,供参考使用。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章