JavaScript获取元素的方法总结

436 阅读1分钟

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获取元素的方法,有些浏览器不适用。