JS获取DOM元素的常用方法

通过标签的ID名获取(document.getElementById())
通过标签名获取标签列表(document.getElementsByTagName())
通过标签的className名获取(document.getElementsByClassName())
通过name获取节点列表(document.getElementsByName())
通过选择器获取到第一个找到的元素(document.querySelector())
通过选择器获取到所有的元素(document.querySelectorAll())

通过标签的ID名获取

<div id="div1"></div>
<script>
	var div1 = document.getElementById("div1");
</script>

我们可以通过唯一的ID获取到我们需要的元素

通过标签名获取标签列表

<div></div>
<div></div>
<div></div>
<script>
	var divs = document.getElementsByTagName("div");
</script>

获取所有的div元素

通过标签的className名获取

<div class="div0"></div>
<div class="div0"></div>
<div class="div0"></div>
<script>
	var div0 = document.getElementsByClassName("div0");
</script>

获取到所有className为div0的元素列表

通过name获取节点列表

 <form id="form1">
        <!-- 所有的表单都必须写name -->
        <input type="text" name="names">
        <input type="password" name="password">
        <input type="radio" name="sex" value="男">
        <input type="radio" name="sex" value="女">
        <input type="submit">
</form>
<script>
	var sexs = document.getElementsByName("sex");
</script>

根据name获取节点列表
注意一点：getElementsByName 不可以通过父元素获取，比如：var sexs=form1.getElementsByName(“sex”);这个操作是错误的

下面两个方法仅适用于IE8以后
通过选择器获取到第一个找到的元素

<div></div>
<div></div>
<div></div>
<script>
	var div=document.querySelector("div");
</script>

查找到第一个div

通过选择器获取到所有的元素

<div></div>
<div></div>
<div></div>
<script>
	var div=document.querySelectorAll("div");
</script>

可以获取到所有的div元素
返回的是一个包含所有div的类数组

JS获取DOM元素的常用方法

猜你喜欢