有很多同学不太了解 JavaScript 中获取元素的方法，那么这篇文章中 zijiebao 小编来为大家介绍一下 JavaScript 获取元素的五种方法。
根据 id 获取元素
根据 id 获取元素是使用getElementById去获取标签的 id 名。如下：
document.getElementById("id名");根据标签获取元素
document.getElementsByTagName("标签的名字");这里用一个例子来说明以上两个获取元素的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript获取元素的几种方法 - 字节宝(zijiebao.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 获取元素
根据 class 获取元素是使用getElementByClassName去获取标签的 class 名。如下：
document.getElementByClassName("类名");使用 class 获取元素的用法与 id 的一致，同学们可以参考上述例子自己编写代码进行获取，可以加深印象。
根据 name 获取元素
document.getElementsByName("name的属性值");使用该方法获取的元素返回的是一个伪数组。具体使用方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript获取元素的几种方法 - 字节宝(zijiebao.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获取元素的几种方法 - 字节宝(zijiebao.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获取元素的几种方法 - 字节宝(zijiebao.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 获取元素的几种方法？获取元素方法介绍”的全部内容。更多 JavaScript 学习请前往 zijiebao。
