js获取元素的五种方法

作者：知新_RL | 2024-02-19 07:24:27

踩

js获取元素

在使用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>

运行效果如下

返回的也是一个伪数组

以上就是我知道的js中获取元素的方法，大家根据自己的需要选择适合的方法。新人一枚，有不对的地方请指出，谢谢啦

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/113359