JS獲取HTML DOM元素的方法

1.根據id獲取標籤元素

　　element.getElementById("元素ID");

        <div id="box1"></div>

        var box1=document.getElementById("box1");  //獲取ID爲 box1 的元素
        console.log(box1);     

 

2.根據標籤名獲取標籤列表

　　　element.getElementsByTagName("標籤名");

        <div id="box1">
            <div id="box2"></div>
        </div>


        var div=document.getElementsByTagName("div"); console.log(div);

 

 獲取到的爲一個HTMLCollection對象,裏面包含了所獲取的元素

 

3.根據className獲取標籤列表

　　　element.getElementsByClassName("class屬性值");

        <div class="box1">
            <div></div>
            <div class="box1"></div>
        </div>
        <p class="box1"></p>

        var box1=document.getElementsByClassName("box1"); //獲取全部class屬性值爲 box1 的元素
        console.log(box1);

 

返回的也是一個HTMLCollection對象

4.根據選擇器獲取到第一個找到的元素

　　　　element.querySelector("選擇器");

        <div>第一個div</div>
        <div class="div0">第一個className爲div0的元素</div>
        <div id="diva">
            <div class="div0">id爲diva下的className爲div0的元素</div>
        </div>
        <div id="div1">id爲div1的元素</div>
        <input type="password">

        var div=document.querySelector("div");  //獲取第一個div元素
 console.log(div); var div1=document.querySelector("#div1"); //獲取id爲div1的元素
 console.log(div1); var div0=document.querySelector(".div0"); //獲取 第一個className爲div0的元素
 console.log(div0); var divaDiv0=document.querySelector("#diva>.div0");// 獲取id爲diva的元素下的 className爲div0的元素 
 console.log(divaDiv0); var ps=document.querySelector("[type=password]"); //獲取第一個 type屬性爲password的元素
        console.log(ps);

 

5.根據選擇器獲取到全部的元素
　　　element.querySelectorAll("選擇");

        <div>第一個div</div>
        <div class="div0">第一個className爲div0的元素</div>
        <div id="diva">
            <div class="div0">id爲diva下的className爲div0的元素</div>
        </div>
        <div id="div1">id爲div1的元素</div>
        <input type="password">

     var div=document.querySelectorAll("div");  //獲取全部div
     console.log(div);

返回的是一個NodeList

 

--