原生js获取DOM对象的几种方法

你的名字 2022-05-22 01:09 366阅读 0赞

## 获取DOM元素的方法： ##

1.  通过id获取

<div id="box"></div>
    <script> let box= document.getElementById("box"); </script>

注意：getElementById()括号中的不需要在前面加“\#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。  
![这里写图片描述][70]  
2. 通过class获取

<div class="box"></div>
    <div class="box"></div>
    <script> let boxCollection= document.getElementsByClassName("box"); let box1 = boxList[0]; let box2 = boxList[1]; </script>

注意：getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。  
![这里写图片描述][70 1]  
3. 通过标签名获取

<div id="box">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
    </div>
    <script> let pCollection= document.getElementsByTagName("p"); </script>

注意: 该方法返回的也是一个集合。  
![这里写图片描述][70 2]  
4. 通过name属性获取

<div id="box">
        <input type="text" name="user" />
    </div>
    <script> let userInput= document.getElementsByName("user"); </script>

返回值如下：  
![这里写图片描述][70 3]  
注意：只有含有name属性的元素(表单元素)才能通过name属性获取  
5. 通过querySelector获取

<div id="box"></div>
    <script> let box= document.querySelector("#box"); </script>

注意：querySelector()方法括号中的值是元素的选择器，所以前面加了”\#”符号，使用的是id选择器。此方法直接返回DOM对象本身。  
![这里写图片描述][70 4]  
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>

结果如下图：  
![这里写图片描述][70 5]  
注意：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元素。
3.  querySelector()与querySelectorAll()两者的联系与区别：  
    联系： 两者括号中的取值都是选择器  
    区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

[70]: /images/20220522/67fbd560cba945d0ba4e025b9b7bc084.png
[70 1]: /images/20220522/9cad302c924c4533a1c069401faacbf3.png
[70 2]: /images/20220522/d1f87f504ac84ca8994e5a4844a789fd.png
[70 3]: /images/20220522/dba4fa25ece3422eaa22ebc11d94b08b.png
[70 4]: /images/20220522/98308c55501643ff8a952466fd888b24.png
[70 5]: /images/20220522/1d5cdea9e8c44e8d981eb7aaf16e9352.png