原生js获取DOM元素的方法
1.通过id获取
<div id="box"></div>
<script>
let box= document.getElementById("box");
</script>
注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。
2. 通过class获取
<div class="box"></div>
<div class="box"></div>
<script>
let boxes= document.getElementsByClassName("box");
let box1 = boxList[0];
let box2 = boxList[1];
</script>
注意:getElementsByClassName()括号中的不需要在前面加 “.” ,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件。
3. 通过标签名获取
<div id="box">
<p>这里放个p1</p>
<p>这里放个p2</p>
<p>这里放个p3</p>
</div>
<script>
let pObj = document.getElementsByTagName('p');
</script>
注意:该方法返回值是一个伪数组。
伪数组:
有数组的数据结构,可以存储数据,但是不能使用数组的方法
4. 通过name属性获取
<div id="box">
<input type="text" name="user" />
</div>
<script>
let user= document.getElementsByName("user");
</script>
注意:只有含有name属性的元素(表单元素)才能通过name属性获取
5. 通过querySelector获取
<div id="box"></div>
<script>
let box= document.querySelector("#box");
</script>
注意:querySelector()方法括号中的值是元素的选择器,所以前面加了”#”符号,使用的是id选择器。此方法直接返回DOM对象本身。
6. 通过querySelectorAll获取
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
let box1= document.querySelector(".box");
let boxes= document.querySelectorAll(".box");
</script>
7. 获取html的方法
document.documentElement是专门获取html这个标签的
8. 获取body的方法
document.body是专门获取body这个标签的
注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但从图中我们可以看出,两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
总结:
1.所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
2.getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。