JS獲取HTML DOM元素的方法

在JS中獲取元素的方法有很多，可以根據實際需要選擇合適的方法

一、JS獲取元素的方法

　　　　 1）根據id獲取標簽元素
            var div1=document.getElementById("div1");

        2）根據標簽名獲取標簽列表
               var divs=document.getElementsByTagName("div")
        
        3)根據className獲取標簽列表
            var div0=document.getElementsByClassName("div0");
        console.log(div0)

        4)獲取id必須使用document調用getElementById
            var diva=document.getElementById("diva");
            var div1=diva.getElementById("div1")//錯誤寫法，
            
        5）下面兩個方法獲取的都是HTMLCollection HTML列表，getElementByTagNames這個方法處理可以使用document以外，還可以使用元素調用，如果使用元素調用，就是指當前這個元素的子元素的中的標簽名是div的
          var diva=document.getElementById("diva");
          var divs=diva.getElementsByTagName("div");
          var divs=document.getElementsByTagName("div");//這個比上面多
          console.log(divs)

        6） 可以根據元素獲取子元素中class是div0的所有元素，如果可以使用document.getElementsByClassName就是獲取整個文檔中class是div0的
            var diva=document.getElementById("diva");
            var div0=diva.getElementsByClassName("div0");
            console.log(div0)

        7）根據name獲取節點列表，NodeList節點列表，getElementByName不可以通過父元素獲取
            var form1=document.getElementById("form1");
            var sex=document.getElementsByName("sex");
            console.log(sex)

以下方法適用於IE8以下

        8）根據選擇器獲取到第一個找到的元素
            var div=document.querySelector("div");//根據選擇器獲取到所有的div
            var div1=document.querySelector("#div1");
            var div0=document.querySelector(".div0");
            var div0=document.querySelector("#diva>.div0");
            var ps=document.querySelector("[name=password]")
            console.log(ps)

二、獲取子元素和子節點

      9）子節點和子元素
        var diva=document.querySelector("#diva");
        console.log(diva.childNodes);//子節點，是NodeList，包含文本節點，注釋節點等等
        console.log(diva.children);//子元素 是HTMLCollection，只包含元素

      10）父節點和父元素
        console.log(diva.parentNode);//父節點
        console.log(diva.parentElement)//父元素
    
      11）第一個子節點和第一個子元素
        console.log(diva.firstChild);//第一個子節點
        console.log(diva.firstElementChild);//第一個子元素

      12）最后一個子節點和最后一個子元素
        console.log(diva.lastChild);//最后一個子節點
        console.log(diva.lastElementChild);//最后一個子元素

      13）下一個兄弟節點和下一個兄弟元素
        console.log(diva.nextSibling);//下一個兄弟節點
        console.log(diva.nextElementSibling);//下一個兄弟元素

      14）上一個兄弟節點和上一個兄弟元素
        console.log(diva.previousSibling);//上一個兄弟節點
        console.log(diva.previousElementSibling);//上一個兄弟元素