1.**querySelector()**方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回null。與getElementsById()類似，這個方法可以通過Document類型或Element類型調用。
2.**querySelectorAll()**方法返回的是一個NodeList實例，而**其底層實現則類似一組元素的快照，而非不斷對文檔進行搜索的動態查詢**。
3.matches()接收一個CSS選擇符，如果調用元素與該選擇符匹配，返回true。IE/edge需加前綴ms，安卓需加前綴webkit。如果想使用這個方法需要編寫一個包裝函數：
function matches(element,selector){
if (element.matches) {
return element.matches(selector);
} else if (element.msMatches){
return element.msMatches(selector);
} else if (element.webkitMatches) {
return element.webkitMatches(selector);
} else {
throw new Error('Not supported.');
}
}
4.Element Traversal API為DOM元素添加了以下5個屬性：
* childElementCount：返回子元素（不包括文本節點和注釋）的個數。
* firstElementChild
* lastElementChild
* previousElementChild
* nextElementChild
5.**getElementsByClassName()**接收一個參數，即一個包含一個或多個類名的字符串，返回帶有指定類的所有元素的NodeList。當傳入多個類名的時候（先后順序不重要q），只返回同時包含這幾個類名的元素。其余特性（集合動態性和性能問題）與getElementsByTagName()類似。
6.HTML5新增了一種操作類名的方式，可以讓操作更簡單也更安全，那就是為所有元素添加classList屬性（有length屬性，可使用方括號語法訪問）。這個新類型還定義了如下方法：
* add()：講給定字符串值添加到類名列表中，如果已經存在就不添加了。
* contains()：表示列表中是否存在給定的值，如果存在則返回true，否則返回false。
* remove()：從列表中刪除給定的字符串。
* toggle()：如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，添加它。
避免一次性傳入多個類名，這樣可能會導致IE11拋出錯誤。
7.**document.activeElement**屬性始終會引用DOOM中當前獲得了焦點的元素。元素獲得焦點的方式又頁面加載、用戶輸入（通常通過按TAB鍵）和在代碼中調用**focus()**方法。默認情況下，文檔剛加載完成時，document.activeElement中保存的是document.body元素的引用。文檔加載期間，document.activeElement的值為null。
另外，HTML5新增了document.hasFocus()方法，這個方法用于確定**文檔**是否獲得了焦點。通過檢測文檔是否獲得了焦點，可以知道用戶是不是正在與頁面交互。
8.使用document.readyState屬性的最強當方式，就是通過它來實現一個指示文檔已經加載完成的指示器。
if (document.readyState == 'complete') {
//執行操作
}
9. 在大多數瀏覽器中，通過innerHTML插入<scriipt>元素并不會執行其中的腳本。并不是所有元素都支持innerHTML屬性（不支持的元素中包括了表格相關元素）。
10.**outerHTML**屬性在讀模式下返回調用它的元素及所有子節點的HTML標簽。在寫模式下，會根據指定的HTML字符串創建新的DOM子樹，然后用這個DOM子樹完全替換調用元素。
11.insertAdjacentHTML()方法用于在元素內或元素外前后插入HTML。
12.在使用innerHTML、outerHTML、insertAdjacentHTML()方法時，最好先手工刪除要被替換的元素的所有事件處理程序和JavaScript對象屬性。
13.**children**屬性返回子節點中的元素節點，除此之外他和childNodes沒有什么區別。IE9+及所有現代瀏覽器都支持這個屬性。
14.元素節點的contains()方法可以檢測傳入元素是否調用元素的后代節點。
15.srollIntoView()方法可以在所有HTML元素上調用，通過滾動瀏覽器窗口或某個容器元素，掉喲個元素就可以出現在視口當中。如果給這個方法傳入true作為參數，或者不傳入任何參數，那么窗口滾動之后會讓調用的元素的頂部與視口頂部盡可能平齊。如果傳入false作為參數，調用元素會盡可能全部出現在視口當中，（可能的話，調用元素的底部會與是視口底部平齊）不過頂部不一定平齊。
`document.forms[0].scrollIntoView();`
當頁面發生變化時，一般會用這個方法來吸引用戶的注意力。實際上，為某個元素設置焦點也會導致瀏覽器滾動并顯示出獲得焦點的元素。
