DOM 是什么
文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問，以改變文檔的結構，樣式和內容。 DOM 提供了一種表述形式— 將文檔作為一個結構化的節點組以及包含屬性和方法的對象。從本質上說，它將 web 頁面和腳本或編程語言連接起來了。
DOM API 獲取元素的 N 種方法
1.document.getElementById()
getElementById方法返回匹配指定id屬性的元素節點。
語法
element = document.getElementById(id);
參數
- element是一個 Element 對象。如果當前文檔中擁有特定ID的元素不存在則返回null.
- id是大小寫敏感的字符串，代表了所要查找的元素的唯一ID.
document.getElementById("test"); // 獲取id為test的元素
2.document.getElementsByClassName()
document.getElementsByClassName方法返回一個類似數組的對象，包含了所有指定 class 名稱的子元素。當調用發生在document對象上時, 整個DOM都會被搜索, 包含根節點。你也可以在任意元素上調用getElementsByClassName() 方法，它將返回的是以當前元素為根節點，所有指定class名稱的子元素。
語法
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
- elements 是查找到的所有元素的集合 HTMLCollection .
- names 是一個字符串，表示用于匹配的 class 名稱列表; class 名稱通過空格分隔
- getElementsByClassName 可以在任意的元素上調用，不僅僅是 document。 調用這個方法的元素將作為本次查找的根元素.
document.getElementsByClassName('test'); // 獲取所有 class 為 'test' 的元素
3.document.getElementsByName()
document.getElementsByName方法用于選擇擁有name屬性的HTML元素（比如form、radio、img、frame、embed和object等），返回一個類似數組的的對象（NodeList對象的實例），因為name屬性相同的元素可能不止一個。
語法
elements = document.getElementsByName(name)
- elements 是一個 NodeList 集合。
- name 是元素的 name 屬性的值。
<form name="up"><input type="text"></form>
<script>
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
</script>
4.document.getElementsByTagName()
document.getElementsByTagName方法返回所有指定HTML標簽的元素，返回值是一個類似數組的HTMLCollection對象，可以實時反映HTML文檔的變化。如果沒有任何匹配的元素，就返回一個空集。
語法
var elements = document.getElementsByTagName(name);
- elements 是一個由發現的元素出現在樹中的順序構成的動態的HTML集合（HTMLCollection） 。
- name 是一個代表元素的名稱的字符串。特殊字符 "*" 代表了所有元素。
var div = document.getElementsByTagName("div")[0]; //獲取HTML中第一個div元素
5.document.querySelector()
document.querySelector方法接受一個CSS選擇器作為參數，返回匹配該選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
語法
element = document.querySelector(selectors);
element 是一個 element 對象（DOM 元素）。
selectors 是一個字符串，包含一個或是多個 CSS 選擇器 ，多個則以逗號分隔。
var el = document.querySelector(".myclass");
// 返回當前文檔中第一個類名為 "myclass" 的元素
6.document.querySelectorAll()
返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優先的先序遍歷文檔的節點)。返回的對象是 NodeList 。
語法
elementList = document.querySelectorAll(selectors);
- elementList 是一個non-live的 NodeList 類型的對象.
- selectors 是一個由逗號連接的包含一個或多個CSS選擇器的字符串.
var test = document.querySelectorAll("div.test")
// 返回文檔中所有的class為"test"的div元素
7.document.elementFromPoint()
document.elementFromPoint方法返回位于頁面指定位置最上層的Element子節點。
語法
var element = document.elementFromPoint(x, y);
- element 是返回的DOM元素.
- x 和 y 是坐標數值, 不需要單位比如px.
var element = document.elementFromPoint(50, 50);
// 選中在(50, 50)這個坐標位置的最上層的那個HTML元素
elementFromPoint方法的兩個參數，依次是相對于當前視口左上角的橫坐標和縱坐標，單位是像素。如果位于該位置的HTML元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）。如果坐標值無意義（比如負值或超過視口大小），則返回null。
