一、選擇符API
Selectors API（www.w3.org/TR/selectors-api/）是由W3C 發起制定的一個標準，致力于讓瀏覽器原生支持CSS 查詢。所有實現這一功能的JavaScript 庫都會寫一個基礎的CSS 解析器，然后再使用已有的DOM 方法查詢文檔并找到匹配的節點。
1、querySelector()方法
querySelector()方法接收一個CSS 選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回null。
var obody = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var selected = document.querySelector(".selected");
var img = document.body.querySelector("img.button");
2、querySelectorAll()方法
querySelectorAll()方法接收的參數與querySelector()方法一樣，都是一個CSS 選擇符，但返回的是所有匹配的元素而不僅僅是一個元素。這個方法返回的是一個NodeList 的實例。
3、matchesSelector()方法
這個方法接收一個參數，即CSS 選擇符，如果調用元素與該選擇符匹配，返回true；否則，返回false。
二、遍歷元素
三、HTML5
1 、與類相關的擴充
·getElementsByClassName()支持getElementsByClassName()方法的瀏覽器有**IE 9+**、Firefox 3+、Safari 3.1+、Chrome 和Opera 9.5+。classList屬性`
HTML5 新增了一種操作類名的方式，可以讓操作更簡單也更安全，那就是為所有元素添加classList 屬性。這個classList 屬性是新集合類型DOMTokenList 的實例。與其他DOM 集合類似，DOMTokenList 有一個表示自己包含多少元素的length 屬性，而要取得每個元素可以使用item()方法，也可以使用方括號語法。此外，這個新類型還定義如下方法。
add(value)：將給定的字符串值添加到列表中。如果值已經存在，就不添加了。
?contains(value)：表示列表中是否存在給定的值，如果存在則返回true，否則返回false。
?remove(value)：從列表中刪除給定的字符串。
? toggle(value)：如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，添加它。
2、焦點管理
元素獲得焦點的方式有頁面加載、用戶輸入（通常是通過按Tab 鍵）和在代碼中調用focus()方法。
document.activeElement屬性 hasFocus()方法
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button);
alert(document.hasFocus());
注意：默認情況下，文檔剛剛加載完成時，document.activeElement 中保存的是document.body 元素的引用。文檔加載期間，document.activeElement 的值為null。
3、HTMLDocument的變化
readyState屬性
有兩個值：
- loading,正在加載文檔
- complete，已經加載完文檔
if(document.readyState === "complete"){
}
compatMode 兼容模式
自從IE6 開始區分渲染頁面的模式是標準的還是混雜的，檢測頁面的兼容模式就成為瀏覽器的必要功能。
head屬性
HTML5新增的document.head屬性
4、字符集屬性
document.charset
document.defaultCharset
5、自定義數據屬性
HTML5 規定可以為元素添加非標準的屬性，但要添加前綴data-，目的是為元素提供與渲染無關的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以data-開頭即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv" data-appid="12345" data-myname="Tom"></div>
<script>
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;
var myName = div.dataset.myname;
div.dataset.appid = 3434;
div.dataset.myname = "jerry";
if(div.dataset.myname){
alert("hello, " + div.dataset.myname);
}
</script>
</body>
</html>
6、插入標記
innerHTML屬性
outerHTML屬性
7、scrollIntoView()方法
四、專有方法
children屬性
個屬性是HTMLCollection 的實例，只包含元素中同樣還是元素的子節點。除此之外，children 屬性與childNodes 沒有什么區別，即在元素只包含元素子節點時，這兩個屬性的值相同。
contains()方法
alert(document.documentElement.contains(document.body)); //true
innerText
通過innertText 屬性可以操作元素中包含的所有文本內容，包括子文檔樹中的文本。在通過innerText 讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。在通過innerText 寫入值時，結果會刪除元素的所有子節點，插入包含相應文本值的文本節點
outerText
除了作用范圍擴大到了包含調用它的節點之外，outerText 與innerText 基本上沒有多大區別。
