在頁面腳本中，如果要對頁面元素進行操作，那麽我們就要獲取到這個元素

那麽在獲取元素之前首先得要了解什麽是DOM（document object model）

在DOM，元素是以節點的形式表示的，每一個節點都是對象，我們平時寫的特效也就是修改的節點對象的屬性來的，這個就是傳說中的DOM操作

而節點樹其實也就是元素的父子級關系的樹狀圖而已，所以啊，不要想的太復雜

這個元素節點了原生JS不能直接操作的，只能通過document這個文檔對象再去獲取

比如我要通過元素ID名獲取元素：

document.getElementById("idName")

這種方式是很多人喜歡的，因為它屬於單詞最短的一個。但是工作過或者有過一定知識儲備的人就知道，ID命名的元素是比較少的，所以這種情況真正用的時候還是比較少的

布局的時候一般情況下class命名比較多的，當然通過Class類名獲取元素的情況是有的：

document.getElementsByClassName("className")

它獲取的元素不是單個，而是一個元素集合（HTMLcollection），如果要獲取單個具體的元素，要在獲取之後加上一個下標[num]就可以了

但是getElementsByClassName並不是一個兼容很好的屬性，IE9，FF5+以下瀏覽器是沒有這個屬性的，這個也是一個很蛋疼的問題，所有也用得少。

如果一定要通過class屬性獲取元素的話，也可以寫它的兼容方法：

 1 function getClass(obj,className){
 
 2       var HTMLCollection = [];
 3       var HTMLArr = document.getElementsByTagName("*");
 4       for(var i=0;i<HTMLArr.length;i++){
 5             if(HTMLArr[i] == className){
 6                  HTMLCollection.push(HTMLArr[i]);
 7            }    
 8       }
 9       return HTMLCollection;

除了類名和ID名之外，也是可以通過標簽獲取的，方法也很簡單，獲取到元素以後，跟類名獲取一樣是存在集合中的，如果要訪問單個就要通過下標獲取

代碼如下：

document.getElementsByTagName("TagName");

這些方法或多或少都有各自的缺點，要麽太長，要麽不能直接獲取想要的元素，如果父子關系比較復雜的話，一次獲取的幾率還比較小的

為什麽很多人喜歡用JQ，因為JQ操作元素通過$（）連接選擇器就可以了，不用擔心，JS也有類似的方法：

document.querySelectorAll("Select")

這種方法很方便的可以直接通過選擇器獲取，返回值nodeList；

以上就是平時用的最多的元素獲取方式，但此方法都是從document下獲取的，如果結構很復雜，這些方法很顯然就不夠用了

不用擔心，DOM還給我們提供了很多節點操作方法，在下一章再跟大家見面吧

本人第一篇文章，先從簡單的說起，今後後陸續更新，如果有什麽建議，錯誤或者想跟我直接交流的可以加我的QQ：3106788893

Javascript基礎簡單匯總（一）：元素獲取