JavaScript获取元素的方法总结

1.根据元素Id获取元素，返回一个对象：document.getElementById("id值")

<img id="im" />
	<script type="text/javascript">
	var im = document.getElementById("im");
	};
	</script>
复制代码

2.根据标签名字获取元素，返回一个伪数组：document.getElementsByTagName("标签名")

<img id="im" />
	<script type="text/javascript">
	var imObjs = document.getElementsByTagName("im");
	console.log(imObjs);
	};
	</script>
复制代码

3.根据name属性获取元素，返回一个伪数组：document.getElementsByName("name属性的值")

<input type = “text” id="im" name="txt" />
<input type = “text” id="im" name="txt" />
	<script type="text/javascript">
	var txtObjs = document.getElementsByName("txt");
	console.log(imObjs);
	};
	</script>
复制代码

4.根据类名获取元素，返回一个伪数组：document.getElementsByClassName("类名")
注意：这是h5中的方法，低版本浏览器不适用

<div class="erweima" id="er">
	<img src="img/456.png" alt="" />
</div>
<div class="erweima" id="er">
	<img src="img/456.png" alt="" />
</div>
<script type="text/javascript">
	var divObjs = document.getElementsByClassName("erweima");
	console.log(divObjs);
	};
	</script>
复制代码

5.根据选择器获取元素，返回一个对象:document.querySelector("css形式的id")

<div class="erweima" id="er">
	<img src="img/456.png" alt="" />
</div>
<div class="erweima" id="er">
	<img src="img/456.png" alt="" />
</div>
<script type="text/javascript">
	var obj = document.querySelector("#er");
</script>
复制代码

6.根据选择器获取元素，返回一个伪数组：document.querySelectorAll("css形式的类名")

<div class="erweima" id="er">
	<img src="img/456.png" alt="" />
</div>
<div class="erweima" id="er">
	<img src="img/456.png" alt="" />
</div>
<script type="text/javascript">
	var divObjs = document.querySelectorAll(".erweima");
	console.log(divObjs);
</script>
复制代码

注意：12获取元素的方法是通用的，3456获取元素的方法，有些浏览器不适用。

转载于:https://juejin.im/post/5baaea806fb9a05ce27409df