### 1.選擇符API
~~~
（完全支持IE8+ ）
someNode.querySelector() // 獲得匹配css選擇規則的第一個元素
someNode.querySelectorAll() // 得到一個HTMLCollection類型的實例
~~~
* * * * *
### 2.元素遍歷
~~~
(完全支持IE9+)
Node類型的元素集里，會包含各種類型的node節點，
當我們只要Element類型的節點時候就會造成干擾。
childElementCount 返回子元素的個數（所有Element類型的節點個數）
firstChild-->firstElementChild
lastChild-->lastElementChild
previousSibling-->previousElementSibling
nextSibling -->nextElementSibling
~~~
* * * * *
### 3.HTML5
#### 3.1 與類相關
>[warning] 查詢： `getElementsByClassName() `
參數是一個包含一個或多個類型的字符串（類名順序不影響），返回值為 `NodeList` 類型由于每次執行有 `NodeList` 類型返回的函數時，都會運行一次基于文檔的查詢， 性能有影響，所以盡量減少此類操作。選擇將獲取的 `NodeList` 類型結果緩存起來。
>[info] 操作類名
以前都是拿到類名字符串，然后解析成其他格式在做處理，現在是可以拿到一個 `DOMTokenList` 類型的 `class` 集
~~~
add() 如果存在就不添加
contains() 如果存在返回true，不存在返回false
remove() 如果存在就刪除
toggle() 如果存在就刪除，否則添加
~~~
* * * * *
#### 3.2. 焦點管理
`someNode.focus()` 使之獲取焦點
* * * * *
#### 3.3. `HTMLDocument` 的變化
~~~
document.readyState
'loading' 文檔正在加載中
'complete' 文檔加載完成
~~~
* * * * *
#### 3.4 兼容模式
~~~
document.compatMode
'CSS1Compat' 標準模式 'BackCompat' 混雜模式
~~~
* * * * *
#### 3.5 document.head
~~~
以前只有 document.body 等，現在有了 document.head
但是要取得html元素的引用 document.documentElement
~~~
* * * * *
#### 3.6 自定義數據屬性
~~~
比如元素上設置了
<div data-a-attr="wdd" ></div>
thisNode.dataset.aAttr==='wdd'
~~~
* * * * *
#### 3.7 innerHTML, outerHTML
* * * * *
#### 3.8 children屬性
~~~
可以得到一個HTMLCollection類型的的集合，相當于把NodeList集合做了個處理
~~~
* * * * *
#### 3.9 scrollIntoView()
~~~
someNode.scrollIntoView(true/false)
參數為:
空或者true，那么該節點的頂部會被滾動到與視口平齊;
false，則該節點的底部與視口的底部平齊
~~~
* * * * *
#### 3.10 contains()
~~~
判斷某節點下是否存在另一個節點
document.html.contains(document.body)
~~~
* * * * *
