javascript 原生獲得document.Element的方法

　　今天這裏寫這個博客的主要目的是記錄一下javascript原生的選擇dom的集中方法。

　　1.document.getElementById。這個方法接收1個參數，就是DOM元素的id（區分大小寫），這也是平時用的最多的方法，而且用這種方法DOM查找的效率是最高的，因此若是能用id查找的dom元素儘可能用id來查詢，返回的類型是DOM ELEMENT。

　　2.document.getElementsByTagName。這個方法接收1個參數，須要查詢的元素標籤（不區分大小寫）。返回的是一個 HTMLCollection集合。因爲HTMLCollection中存在方法item()和namedItem()這兩個方法，因此須要取到特定的元素就有2種方法，例：var tags = document.getElementsByTagName("div");

• 1 經過item取值。傳入的是一個數值型的參數,表明在集合中的位置。var div1 = tags.item(0)。取得tags中的第一個元素。固然也能夠用tags[0]來表示。
• 2 經過namedItem來取值。傳入的1個參數，能夠是須要查找元素的id或者是name。var div1 = tags.namedItem("name")。取到id或者name爲「name」的元素。也能夠用tags["name"]來表示，結果相同。

　　3.document.getElementsByName。該方法接收1個參數，查找元素的name特性，不是id（區分大小寫）。返回的是一個NodeList類型的集合。其中帶有方法item。使用的方法和方法2相似，可是因爲沒有namedItem方法，因此不能經過namedItem和["name"]來獲取到相關元素。

　　4.document.getElementsByClassName。該方法接收1個參數，須要查找元素的class名。能夠包含一個或多個類型的字符串，返回的類型也是HTMLCollection集合。好比須要查找帶有red、blue類的元素，能夠用document.getElementsByClassName("red blue")。類名的前後順序無所謂。而後用與方法2相同的方式選擇某個元素。

　　5.querySelector。該方法接收1個參數，一個css選擇符。若是沒有找到匹配的元素返回的就是null，若是找到匹配的元素就返回第一個匹配的元素。好比var body = document.querySelector("body")。若是傳入的css選擇符出錯，則會拋出錯誤。

　　6.querySelectorAll。接收的參數也是一個css選擇符。返回的類型是一個NodeList集合。底層實現則相似於一組元素的快照，並不是不斷對文檔進行搜索的動態查詢。若是傳入的css選擇符出錯，則會拋出錯誤。