本文详细介绍JavaScript中获取DOM元素的五种核心方法：通过ID、标签名、Name属性、Class名以及CSS选择器。重点解析getElementById与querySelector返回单个元素对象，而getElementsBy*系列与querySelectorAll返回伪数组的区别，并结合具体代码案例演示如何遍历修改元素内容。
JavaScript DOM元素获取概述
在JavaScript开发中，操作DOM元素是前端交互的基础。掌握多种获取元素的方式，能够灵活应对不同的页面结构需求。
最基础且高效的方法是通过元素的唯一标识符进行获取。使用document.getElementById("id属性的值")即可定位到目标元素。
该方法执行后，返回值是一个具体的元素对象（Element Object）。如果文档中不存在该ID的元素，则返回null。
示例场景：点击按钮触发弹窗。
<body>
<input type="button" value="弹框" id="btn">
<script>
//根据id属性的值从文档中获取这个元素
var btnobj = document.getElementById("btn");
//为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)
btnobj.onclick = function () {
//响应做的事情
alert("码仙");
};
</script>
</body>
基于标签名与Name属性的获取方式
第二种方法是通过HTML标签名称来获取元素集合。调用document.getElementsByTagName("标签的名字")可以获取文档中所有指定标签的元素。
与getElementById不同，此方法返回的是一个伪数组（HTMLCollection）。虽然支持length属性和索引访问，但不具备标准数组的push、pop等方法。
示例场景：点击按钮后，批量修改多个p标签的文本内容。
<body>
<input type="button" value="改变" id="btn">
<div id="dv">
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
</div>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//根据标签名字获取标签
var pObjs = document.getElementsByTagName("p");
//var pObjs=document.getElementById("dv1").getElementsByTagName("p");
//循环遍历这个数组
for (var i = 0; i < pObjs.length; i++) {
//每个p标签,设置文字
pObjs[i].innerText = "我们都是p";
}
};
</script>
</body>
第三种方法是根据元素的name属性值来获取元素。使用document.getElementsByName("name属性的值")可以筛选出具有特定name属性的元素。
返回值同样是一个伪数组（NodeList）。需要注意的是，该方法在HTML文档中通常只用于表单元素，而在XML文档中可用于任何元素。
示例场景：点击按钮，将所有name属性值为name1的文本输入框的value属性值统一修改。
<body>
<input type="button" value="显示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<script>
//点击按钮,改变所有name属性值为name1的文本框中的value属性值
document.getElementById("btn").onclick = function () {
//通过name属性值获取元素-------表单的标签
var inputs = document.getElementsByName("name1");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "我很好";
}
};
</script>
</body>
基于类名与CSS选择器的获取方式
第四种方法是通过CSS类名来获取元素。调用document.getElementsByClassName("类样式的名字")可以获取所有应用了该class的元素。
返回值是一个伪数组（HTMLCollection）。这是前端开发中非常常用的一种批量操作元素的方式。
示例场景：点击按钮后，修改所有具有特定class的文本框的值。
<body>
<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/>
<script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//获取所有的文本框
//根据类样式的名字获取元素
var inputs = document.getElementsByClassName("text");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "码仙";
}
};
</script>
</body>
5.根据选择器获取元素 1.document.querySelector("选择器");
第一种是document.querySelector("选择器")。它接收一个CSS选择器字符串，返回文档中匹配该选择器的第一个元素对象。如果未找到匹配项，则返回null。
示例场景：点击按钮弹出提示框，演示如何获取单个元素并绑定事件。
<body>
<input type="button" value="显示效果1" id="btn"/>
<input type="button" value="显示效果2" class="btn"/>
<script>
//点击按钮弹出对话框
//根据选择器的方式获取元素
var btnObj1 = document.querySelector("#btn");
btnObj1.onclick = function () {
alert("我变帅了");
};
var btnObj2 = document.querySelector(".btn");
btnObj2.onclick = function () {
alert("哈哈,我又变帅了");
};
</script>
</body>
第二种是document.querySelectorAll("选择器")。它接收一个CSS选择器字符串，返回文档中匹配该选择器的所有元素集合。
返回值是一个静态的NodeList伪数组。与getElementsBy*系列不同，querySelectorAll返回的是实时快照，后续DOM变化不会影响已获取的集合。
示例场景：点击按钮后，利用querySelectorAll获取所有文本框并统一修改其值。
<body>
<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/>
<script>
document.getElementById("btn").onclick = function () {
//根据选择器的方式获取元素
var inputs = document.querySelectorAll(".text");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "码仙";
}
};
</script>
</body>
本文总结了JavaScript中常见的几种获取元素的方式，涵盖了从基础ID定位到现代CSS选择器查询的各种场景。理解各方法的返回值类型（单个对象 vs 伪数组）及其适用场景，有助于编写更高效、可维护的前端代码。