JavaScript获取元素的五种方法？获取元素方法介绍

有很多同学不太了解 JavaScript 中获取元素的方法，那么这篇文章中 w3cschool 小编来为大家介绍一下 JavaScript 获取元素的五种方法。

根据 id 获取元素

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

document.getElementById("id名");

根据标签获取元素

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript获取元素的几种方法 - 编程狮(w3cschool.cn)</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 元素时则使用了标签获取的方式。上述代码实现的功能是点击按钮时将原本的“这是一段文字”换成“已改变”。如下图：

JavaScript获取元素

根据 class 获取元素

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

document.getElementByClassName("类名");

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

根据 name 获取元素

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript获取元素的几种方法 - 编程狮(w3cschool.cn)</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>

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

JavaScript获取元素

根据选择器获取元素

document.querySelector("选择器");

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript获取元素的几种方法 - 编程狮(w3cschool.cn)</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>

JavaScript获取元素

或

document.querySelectorAll("选择器");

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript获取元素的几种方法 - 编程狮(w3cschool.cn)</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 获取元素的几种方法？获取元素方法介绍”的全部内容。更多 JavaScript 学习请前往 w3cschool。

推荐课程：JavaScript 零基础入门、JavaScript 基础实战