这篇文章主要介绍JavaScript如何获取元素，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

根据 id 获取元素

根据 id 获取元素是使用getElementById去获取标签的 id 名。如下：

document.getElementById("id名");根据标签获取元素

document.getElementsByTagName("标签的名字");

这里用一个例子来说明以上两个获取元素的用法。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>JavaScript获取元素的几种方法-亿速云(yisu.com)</title></head><body><inputtype="button"value="按钮"id="btn"><div><p>这是一段文字</p></div><scripttype="text/javascript">document.getElementById("btn").onclick=function(){varp=document.getElementsByTagName("p");for(vari=0;i<p.length;i++){p[i].innerText="已改变";}}</script></body></html>

我们可以看到，在获取按钮时，使用了 id 获取方式，而在获取 p 元素时则使用了标签获取的方式。上述代码实现的功能是点击按钮时将原本的“这是一段文字”换成“已改变”。

根据 class 获取元素

根据 class 获取元素是使用getElementByClassName去获取标签的 class 名。如下：

document.getElementByClassName("类名");

使用 class 获取元素的用法与 id 的一致，同学们可以参考上述例子自己编写代码进行获取，可以加深印象。

根据 name 获取元素

document.getElementsByName("name的属性值");

使用该方法获取的元素返回的是一个伪数组。具体使用方式如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>JavaScript获取元素的几种方法-亿速云(yisu.com)</title></head><body><inputtype="button"value="按钮"id="btn"><inputtype="text"name="text"value="请填入内容"><scripttype="text/javascript">document.getElementById("btn").onclick=function(){vartext=document.getElementsByName("text");for(vari=0;i<text.length;i++){text[i].value="已填入内容";}}</script></body></html>

上述实现的效果是：未点击按钮时，文本输入框中显示的内容为“请填入内容”，点击按钮后文本框中的内容显示为“已填入内容”。

根据选择器获取元素

document.querySelector("选择器");

使用该方法返回值是一个元素对象。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>JavaScript获取元素的几种方法-亿速云(yisu.com)</title></head><body><inputtype="button"value="按钮1"id="btn"><scripttype="text/javascript">varbtn1=document.querySelector("#btn");btn1.onclick=function(){alert("第一个按钮");};</script></body></html>或

document.querySelectorAll("选择器");

使用该方法返回的是一个伪数组。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>JavaScript获取元素的几种方法-亿速云(yisu.com)</title></head><body><inputtype="button"value="按钮"id="btn"><br><inputtype="text"value="修改文本"class="text"><scripttype="text/javascript">document.getElementById("btn").onclick=function(){vartext=document.querySelectorAll(".text");for(vari=0;i<text.length;i++){text[i].value="文本已被修改";};};</script></body></html>

以上是“JavaScript如何获取元素”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！