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，特殊的在父选子时单词有所改变，
  要注意区分。自习观察就能看到他们相似而又有所区别的地方，这里就不一一分析了