一、通過元素類型的方法來操作：
- document.getElementById();//id名，
- document.getElementsByTagName();//標籤名
- document.getElementsByClassName();//類名
- document.getElementsByName();//name屬性值，一般不用
- document.querySelector();//css選擇符模式，返回與該模式匹配的第一個元素，結果爲一個元素；如果沒找到匹配的元素，則返回null
- document.querySelectorAll()//css選擇符模式，返回與該模式匹配的所有元素，結果爲一個類數組
注意：
-
前綴爲document，意思是在document節點下調用這些方法，當然也可以在其他的元素節點下調用
二、根據關係樹來選擇（遍歷節點樹）：
【先簡單介紹一下節點：
DOM（文檔對象模型）可以將任何HTML、XML文檔描繪成一個多層次的節點樹。所有的頁面都表現爲以一個特定節點爲根節點的樹形結構。html文檔中根節點爲document節點。
所有節點都有nodeType屬性，代表節點的不同類型，通過nodeType屬性可以來判斷節點的類型。經常使用的節點主要有以下幾種類型：
- Element類型（元素節點）：nodeType值爲 1
- Text類型（文本節點）：nodeType值爲 3
- Comment類型（註釋節點）：nodeType值爲 8
-
所有的節點都有 hasChildNodes()方法 判斷有無子節點 有一個或多個子節點時返回true】
通過一些屬性可以來遍歷節點樹：
- parentNode//獲取所選節點的父節點，最頂層的節點爲#document
- childNodes //獲取所選節點的子節點們
- firstChild //獲取所選節點的第一個子節點
- lastChild //獲取所選節點的最後一個子節點
- nextSibling //獲取所選節點的後一個兄弟節點 列表中最後一個節點的nextSibling屬性值爲null
- previousSibling //獲取所選節點的前一兄弟節點 列表中第一個節點的previousSibling屬性值爲null
三、基於元素節點樹的遍歷（遍歷元素節點樹）：
- parentElement //返回當前元素的父元素節點（IE9以下不兼容）
- children // 返回當前元素的元素子節點
- firstElementChild //返回的是第一個元素子節點（IE9以下不兼容）
- lastElementChild //返回的是最後一個元素子節點（IE9以下不兼容）
- nextElementSibling //返回的是後一個兄弟元素節點（IE9以下不兼容）
- previousElementSibling //返回的是前一個兄弟元素節點（IE9以下不兼容）