選擇器詳解（1） javascript對象選取詳解

選擇器詳解（1）

javascript對象選取詳解

衆所周知，找對象是一件很困難的事！！！

前端人員往往面對着一個問題，自己精心設計的事件不能綁定到所需要的元素之上，自己設計的函數不能在創建出來的對象上循環運行而致使所得的結果與自己想要的不一致。因此，小編決定整理一系列詳細的選擇器用法，分別分爲javascript篇，jquery篇以及CSS3篇，希望通過整理幫助自己更好的理解選擇器，也幫助各位看官整理思路。

原生的javascript需要我們創建變量來獲取對象，我們通過demo一一列舉。

---

1.getElementbyID

ID選擇器，語法：

var idName=document.getElementbyID(“idName”);

demo:

var div=document.getElementById("div");//創建節點對象
div.onclick=function () {
    this.style.background="blue";
}
//對事件添加事件

---

2.getElementsByClass(“className”);

CLASS選擇器，語法：

var className=document.getElementsClass("className");

className取到的對象是一個數組，因此產生了兩種用法，當選取單個對象時，我們可以直接寫爲:

var className=document.getElementsClass("className")[index];

當選取多個對象時，我們可以直接寫爲：

var className=document.getElementsClass("className");

在創建節點綁定相同事件時，如果不使用事件委託的方法，我們可以利用CLASS選擇出的是一個數組爲節點綁定方法

var li=document.getElementsByClassName("nav_li");
for(var i=0;i<li.length;i++){
    li[i].onmouseover=function(){
        this.style.overflow="visible";
    }
    li[i].onmouseout=function(){
        this.style.overflow="hidden";
    }
}

然而我們會發現，當我們通過這種方法選取CLASS節點下的結點時，for循環的i變量會由於函數的閉包而使內部的事件選取不到變量值，但我們可以使用如下方式傳值，需要特別注意：

var li=document.getElementsByClassName("nav_li");
var dl=document.getElementsByClassName("nav_dl");
for(var i=0;i<li.length;i++){
    li[i].index=i;
    li[i].onmouseover=function(){
        dl[this.index].style.display = "block";
    }
    li[i].onmouseout=function() {
        dl[this.index].style.display = "none";
    }
}

---

3.getElementsByTagName

TagName選擇器，語法：

var tagName=document.getElementsBytagName("tagName");

TagName選擇器與CLASS選擇器用法類似，同樣選擇到的是一個數組，但是，由於tagName是按照節點標籤選取對象，因此推薦不使用CLASS選擇器的方法二，只使用方法一。

demo:

var div=document.getElementsByTagName("div")[0];
div.onclick=function () {
    this.style.background="blue";
}

---

4.移動端利器，querySelector和document.querySelectorAll

querySelector選擇器,語法：

    element = document.querySelector('selectors');

querySelectorAll選擇器,語法：

    elementList = document.querySelectorAll('selectors');

儘管這兩種方法在PC端存在一定的兼容問題，但其靈活的用法使其成爲移動端項目原生選擇器的不二法門，當然其參數selectors 可以包含多個CSS選擇器，用逗號隔開：

    element = document.querySelector('selector1,selector2,...');
    elementList=document.querySelectorAll('selector1,selector2,...');

有一個小弊端，使用這兩個方法無法查找帶僞類狀態的元素，比如querySelector(‘:hover’)不會得到預期結果。在使用的時候需要特別注意。

---

5.特別提醒

我想很多看官已經注意到，所有的元素都在document下查找會選取到許多不必要的節點，實際上，我們選取對象的目錄是可以更改的：

<div>
    <p></p>
</div>
var div=document.getElementsByTagName("div")[0];
var p=div.getElementsByTagName("p")[0];
p.onclick=function () {
    alert("選擇到了對象");
}

---

至此，javascript選擇器的基本用法已經基本展示完了，但實際上，我們在實際的使用中常常面臨一種情況，當我們創建節點的時候，會面臨到未來節點無法選取的尷尬境地，在本文結尾，我們引入事件監聽機制解決這種情況，

demo:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
document.getElementsByTagName[0].addEventListener("click",function(e){
    if(e.target&&e.target.nodeName.toUpperCase=="LI"){
        this.style.background="blue";
    }
})

事件監聽的內容有很多很複雜，同時由於兼容性問題，我們需要做很多的處理，在本文中只能一筆帶過，筆者將在之後的微博中詳細講解事件監聽機制以及兼容問題。

---

想要了解更多內容請關注筆者博客，定期更新，歡迎訂閱。