JavaScript選擇器

元素節點選擇器：
 id選擇器 、 class選擇器、  name選擇器 、   tagname選擇器、  高級選擇器   、關系選擇器

ID選擇器：返回單個對象；

     //假設頁面上有一個id名為box的元素     
var box = document.getElementById("box");
     console.log(box)
 //選中這個元素

class選擇器：返回數組對象，可通過索引解析其中的元素。

var acont = document.getElementsByClassName("cont")
  console.log(acont)                        //所有class名為cont元素組成的數組
  console.log(acont[0])                   //通過索引選中它的第一個元素
  console.log(acont[0].innerHTML)  //通過索引直接拿到它的innerhtml值   
  console.log(acont.innerHTML)      //選中整個數組的所有innerHTML值

tagname選擇器：返回數組對象，可通過索引解析其中的元素。

    var aspan = document.getElementsByTagName("span")
    //選中所有span標簽
     console.log(aspan)
    //打印它返回的數組對象

name選擇器：返回數組對象，可通過索引解析其中的元素。

    var auser = document.getElementsByName("user")
    //選中所有name屬性為user的元素
     console.log(auser)
    //打印這個數組對象

ES5新增的高級選擇器：

1：querySelector：返回的是單個對象。

    var ele = document.querySelector("#box")
     var ele = document.querySelector(".cont")
     var ele = document.querySelector("span")
     var ele = document.querySelector(".msg h2")
     console.log(ele)
//小括號里可以寫ID名，class名，標簽名，也可以使用父元素下的子元素的寫法。

2：querySelectorAll：返回數組對象，可通過索引解析其中的元素。

     var ele = document.querySelectorAll("#box")
     var ele = document.querySelectorAll(".cont")
     var ele = document.querySelectorAll("span")
     var ele = document.querySelectorAll(".msg h2")
     var ele = document.querySelectorAll(".msg>h2")
     console.log(ele)
//寫法類似queryselector，不過這個返回的是數組對象

關系選擇器：

1：父元素選子元素：

        var omsg = document.querySelector(".msg");
        //選中父元素
         console.log(omsg.children);
       //打印出父元素下的所有子元素

2：子元素選父元素：

         var osbox = document.querySelector(".sbox");
         //選中有父元素的子元素
         console.log(osbox.parentNode);
        //打印出打的父元素

3：選中第一個子元素：

        var omsg = document.querySelector(".msg");
        //選中父元素
         console.log(omsg.firstElementChild)；
        //打印出當前選擇的父元素下的第一個子元素        

4：選中最后一個子元素：

         var omsg = document.querySelector(".msg");
         console.log(omsg.lastElementChild)
       //顯而易見，frist是第一個，那么last是最后一個

5：選中上一個兄弟元素：

        var omsg = document.querySelector(".msg");
        //選中一個元素
         console.log(omsg.previousElementSibling)
       //打印出和它同級的上一個元素（上一個兄弟元素）    

6：選中下一個兄弟元素：

         var omsg = document.querySelector(".msg");
         //選中一個元素
         console.log(omsg.nextElementSibling)
         //打印出和它同級的下一個元素（下一個兄弟元素）

其他節點選擇器：

         父選子：
             var obox = document.querySelector(".box")
             console.log(obox.childNodes)
         上一個兄弟：
             var obox = document.querySelector(".box")
             console.log(obox.previousSibling)
         下一個兄弟：
             var obox = document.querySelector(".box")
             console.log(obox.nextSibling)
         第一個子：
             var obox = document.querySelector(".box")
             console.log(obox.firstChild)
         最后一個子：
             var obox = document.querySelector(".box")
             console.log(obox.lastChild)        
//和元素節點選擇器比較，其他節點選擇器的關系選擇只是在打印元素時少了一個element，特殊的在父選子時單詞有所改變，
  要注意區分。自習觀察就能看到他們相似而又有所區別的地方，這里就不一一分析了