这篇文章主要介绍JavaScript如何获取元素，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
根据 id 获取元素是使用getElementById去获取标签的 id 名。如下：
document.getElementById("id名");document.getElementsByTagName("标签的名字");这里用一个例子来说明以上两个获取元素的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript获取元素的几种方法 - 亿速云(yisu.com)</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div>
<p>这是一段文字</p>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var p=document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].innerText="已改变";
}
}
</script>
</body>
</html>我们可以看到，在获取按钮时，使用了 id 获取方式，而在获取 p 元素时则使用了标签获取的方式。上述代码实现的功能是点击按钮时将原本的“这是一段文字”换成“已改变”。
根据 class 获取元素是使用getElementByClassName去获取标签的 class 名。如下：
document.getElementByClassName("类名");使用 class 获取元素的用法与 id 的一致，同学们可以参考上述例子自己编写代码进行获取，可以加深印象。
document.getElementsByName("name的属性值");使用该方法获取的元素返回的是一个伪数组。具体使用方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript获取元素的几种方法 - 亿速云(yisu.com)</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<input type="text" name="text" value="请填入内容">
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var text=document.getElementsByName("text");
for(var i=0;i<text.length;i++){
text[i].value="已填入内容";
}
}
</script>
</body>
</html>上述实现的效果是：未点击按钮时，文本输入框中显示的内容为“请填入内容”，点击按钮后文本框中的内容显示为“已填入内容”。
document.querySelector("选择器");使用该方法返回值是一个元素对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript获取元素的几种方法 - 亿速云(yisu.com)</title>
</head>
<body>
<input type="button" value="按钮1" id="btn">
<script type="text/javascript">
var btn1=document.querySelector("#btn");
btn1.onclick=function(){
alert("第一个按钮");
};
</script>
</body>
</html>document.querySelectorAll("选择器");使用该方法返回的是一个伪数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript获取元素的几种方法 - 亿速云(yisu.com)</title>
</head>
<body>
<input type="button" value="按钮" id="btn"><br>
<input type="text" value="修改文本" class="text">
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var text=document.querySelectorAll(".text");
for(var i=0;i<text.length;i++){
text[i].value="文本已被修改";
};
};
</script>
</body>
</html>以上是“JavaScript如何获取元素”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
