JavaScript获取元素的五种实用方法-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61685405/article/details/120482549

在使用Javascript的过程中我们经常都需要获取元素，接下来就给大家介绍一下我知道的在js中获取元素的五种方法。

1.根据选择器查找元素

1.1 document.querySelector();

返回文档中匹配指定的选择器组的第一个元素

1.2 document.querySelectorAll();

返回文档中匹配指定的选择器组的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
	</body>
	<script type="text/javascript">
		var div=document.querySelector(".c1");
		var div1=document.querySelectorAll(".c1");
		console.log(div);
		console.log(div1);
	</script>
</html>

运行效果如下

这个方法功能强大，简单又好用。

2.document.getElementById();

通过id获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1"></div>
	</body>
	<script type="text/javascript">
		var div=document.getElementById("d1");
		var div1=document.getElementById("d2");
		console.log(div);
		console.log(div1);
	</script>
</html>

获取到元素则返回该元素，如果页面上没有你所获取的id（例如上面代码中的div1），则返回null，以上代码运行效果如下

3.document.getElementsByTagName（）

通过标签名获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div name="d1"></div>
		<div name="d2"></div>
	</body>
	<script type="text/javascript">
		var div=document.getElementsByTagName("div");
		var div1=document.getElementsByTagName("p");
		console.log(div);
		console.log(div1);
	</script>
</html>

运行效果如下

因为通过getElementByTagName获取到的是一个伪数组，所以页面上没有对应标签的时候返回0

4.document.getElementsByName()

通过name属性获取元素

这个方法不推荐使用，因为在IE和欧朋浏览器中，通过这个方式会获取到相同的id的元素

5.document.getElementsByClassName()

通过class属性获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c2"></div>
	</body>
	<script type="text/javascript">
		var div=document.getElementsByClassName("c1");
		var div1=document.getElementsByClassName("c2");
		console.log(div);
		console.log(div1);
	</script>
</html>

运行效果如下