DOM選擇器之元素選擇器

DOM中元素選擇器

　　在DOM中我們可以將元素選擇器分為兩類；1、元素節點選擇器；2、其它節點選擇器。通過選擇器選擇HTML中的元素以對其進行操作，以此實現用JS對頁面的操作。

　　一、元素節點選擇器

　　1.ID選擇器：document.getElementById()

　　通過標簽的ID名選擇,返回的是單個的值，在HTML中ID具有唯一性；

　　2.class選擇器：document.getElementsByClassName()

var aEle=document.getElementsByClassName("myClass")　　//選擇文檔中所有class名為myClass的元素，返回一個數組。

　　通過標簽的class名進行選擇，返回的是一個數組，當我們需要對單個進行操作時，可利用數組的操作來選擇單個的元素；這里需要注意的是，不同於ID選擇器，因為是一個數組所以是Elements,注意有一個s，又由於在ES6中有class關鍵字，為了避免重復這里用的是ClassName。

　　3.標簽選擇器：document.getElementsByTagName()

　　通過標簽名進行選擇,如下選擇文檔中所有span標簽。

var aspan=document.getElementsByTagName("span")　　//選擇DOM文檔中所有的<span></span>標簽，返回一個數組。

 　　4.name選器：document.getElementsByName()

　　語法如下：

var auser=document.getElementsByName("user");

　　name選擇器一般用於表單，含有name屬性的標簽；同樣，返回的是一個數組。

　　5.高級選擇器：ES5新增的選擇器

　　querySelector()和querySelectorAll()

　　① querySelector()　　返回的是單個對象

　　語法如下：

var ele = document.querySelector("#box");
var ele1 = document.querySelector(".class");
var ele2 = document.querySelector("span");
var ele3 = document.querySelector(".msg h2");
var ele4 = document.querySelector(".msg>h2");

　　從上面的代碼我們可以看到，這個選擇器的功能強大到出乎你的想象，甚至支持css中的所有選擇器。

　　②querySelectorAll（）　　返回一個數組對象

　　語法同querySelector();

 　　6.關系選擇器

　　我將關系選擇器分成三類：① 父選子② 子選父③ 兄弟

 　　① 父選子

var omsg = document.querySelector(".msg");
     omsg.children             //所有子元素；
     omsg.firstElementChild   //第一個子元素；
     omsg.lastElementChild    //最后一個子元素；            

　　②子選父

var    aspan = document.querySelector("span");
        span.parentNode;    //選擇span 的父元素；

　　③兄弟選擇器

var    aspan=document.querySelector("span");
        aspan.previousElementSibling    //選擇span的上一個兄弟元素
        aspan.nextElementSibling    //選擇span的下一個兄弟元素

 

 

Tip：上面所提到的利用選擇器返回一個數組，該數組是一個偽數組，當需要對單個元素進行操作的時候，可以對該數組進行索引，遍歷，但是要注意的是，不能使用數組的方法！