獲取dom元素的幾種方式

文章目錄

• 獲取dom元素的幾種方式
• 1、document.getElementById("id的名稱")
• 2、document.getElementsByClassName("class的名稱")
• 3、document.getElementsByTagName("標籤")
• 4、document.getElementsByName("name屬性的名稱")
• 5、document.querySelector("選擇器")
• 6、document.querySelectorAll("選擇器")

1、document.getElementById(“id的名稱”)

通過document.getElementById獲取到的元素只有一個元素物件。
比如：

<div id="box1">emmm</div>
<script>
    var oBox1 = document.getElementById('box1');
    console.log(oBox1);
</script>

列印結果如下：

2、document.getElementsByClassName(“class的名稱”)

這種方式會獲取到的是一個集合HTMLCollection，哪怕只有一個元素，也是一個集合。想要得到這個元素的話，按照陣列獲取元素的方式，比如arr[0],arr[1]…

<div class="box">qqq1</div>
<div class="box">qqq2</div>
<div class="box">qqq3</div>
<div class="box">qqq4</div>
<script>
    var aBox = document.getElementsByClassName("box");
    console.log(aBox);
     for (var i = 0; i < aBox.length; i++) {
        console.
 
log(aBox[i]);
    }
</script>

輸出結果如下：是個集合

可以迴圈遍歷，輸出每一個元素

3、document.getElementsByTagName(“標籤”)

得到的也是一個集合HTMLCollection

<ul>
    <li>aaaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
<script>
    var aLi = document.getElementsByTagName("li");
    console.log(aLi);
    for (var i = 0; i < aLi.length; i++) {
        console.log(aLi[i]);
    }
</script>

4、document.getElementsByName(“name屬性的名稱”)

得到的結果也是一個集合，NodeList

<input type="text" name="haha" >
<input type="text" name="haha" >
<script>
    var aHaha = document.getElementsByName("haha");
    console.log(aHaha);
    for (var i = 0; i < aHaha.length; i++) {
        console.log(aHaha[i]);
    }
</script>

5、document.querySelector(“選擇器”)

根據元素選擇器獲取元素，比如#id,.class,p…
querySelector獲取的是一個元素物件

<div id="box1">emm</div>
<script>
    var oBox1 = document.querySelector("#box1");
    console.log(oBox1);
</script>

6、document.querySelectorAll(“選擇器”)

根據元素選擇器獲取元素，比如#id,.class,p…
這裡獲取的是一個集合NodeList

<ul>
    <li>aaaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
<script>
    var aLi = document.querySelectorAll("li");
    console.log(aLi);
    for (var i = 0; i < aLi.length; i++) {
        console.log(aLi[i]);
    }
</script>