一.選擇符API
1.querySelector()方法
接受一個(gè)CSS選擇符竖瘾，返回一個(gè)與這個(gè)模式匹配的第一個(gè)元素酒来，如果沒有酝陈，則返回null
//取得body元素
var body = document.querySelector("body"）
//取得id為myId的元素
var myId = document.querySelector("#myId"）
//取得class為.selected的第一個(gè)元素
var selected = document.querySelector(".selected"）
2.querySelectorAll()方法
接受一個(gè)CSS選擇符涛癌，返回一個(gè)與這個(gè)模式匹配的所有元素的NodeList實(shí)例，如果沒有匹配元素势腮，返回空Nodelist實(shí)例
//取得id為myDiv里面所有的<em>元素
var ems = document.getElementById("myDiv").querySelectorAll("em"）
//取得class為.selecteds的所有元素
var selecteds = document.querySelectorAll(".selected"）
3.matchesSelector()方法
接受一個(gè)CSS選擇符，如果調(diào)用元素與該選擇符匹配漫仆，返回true捎拯，否則返回false
if(document.body.matchesSelector("body.page1")){
//true
}
兼容行問題：這個(gè)方法支持IE9+，F(xiàn)irefox 3.6+盲厌，而Safari 5+和Chrome要通過wbkitMatchesSelector()
二.元素遍歷
為什么會(huì)提到這個(gè)問題署照？其實(shí)是 對于元素之間的空格，IE9以及之前的版本是不會(huì)返回文本節(jié)點(diǎn)的吗浩，這就導(dǎo)致了childNodes還有firstChild屬性行為不一致建芙，為解決這一問題，Element Traversal規(guī)范定義了一組屬性
- childElementCount 返回子元素的個(gè)數(shù)（不包括文本節(jié)點(diǎn)和注釋）
- firstElementChild 返回第一個(gè)元素
- lastElementChild 返回最后一個(gè)元素
- previousElementSibling 指向前一個(gè)同輩元素
- nextElementSibling 指向后一個(gè)同輩元素
兼容行問題：Element Traversal規(guī)范支持IE9+懂扼，F(xiàn)irefox 3.5+禁荸，而Safari 4+和Chrome Opera 10+
三.HTML5
DOM擴(kuò)展，為什么涉及到H5阀湿？赶熟？？
其實(shí)是H5新增了標(biāo)記炕倘，H5規(guī)范圍繞這些新增標(biāo)簽定義了大量的JavaScript API, 一些API與DOM重疊
1.與類相關(guān)的擴(kuò)充
getElementByClassName()方法
接受一個(gè)包含一個(gè)或者多個(gè)類名的字符串钧大，返回帶有指定類的所有元素的NodeList實(shí)例，傳入類名順序不重要
//獲取所有類中包含username和current的元素 罩旋，類名順尋無所謂
var eles = document.getElementByClassName("username current")
兼容行問題：這個(gè)方法支持IE9+啊央，F(xiàn)irefox 3+，而Safari 3.1+和Chrome Opera 9.5+
classList屬性
我們操作元素的類名時(shí)涨醋，通過className屬性來增加瓜饥，刪除，修改類型浴骂，但是如果我們只是想對某一個(gè)類名操作乓土，只有className的話，想一下過程溯警，通過className獲取到類名字符串趣苏，對字符串修改，改完在通過className重新設(shè)計(jì)梯轻，復(fù)雜食磕，針對這一點(diǎn)，H5新增了一些操作類名的方法：
它為所有元素添加了 classList屬性 喳挑，這個(gè)屬性是新集合類型DOMTokenlist的實(shí)例彬伦，DOMTokenlist滔悉，也有l(wèi)ength屬性，取得每個(gè)元素可以使用 item()方法也可以使用方括號单绑，還定義了一些方法
- add(value) 把給定的值添加到列表中回官，如果已經(jīng)存在，不添加
- contain(value) 查看列表中存在給定的值嗎搂橙，存在返回true歉提，不存在返回false
- remove(value) 從列表中刪除字符串
- toggle(value) 如果列表中已存在給定值，刪除区转，如果列表中不存在唯袄，添加
兼容行問題：classList屬性支持Firefox 3.6+和Chrome
2.焦點(diǎn)管理
document.activeElement屬性 ：始終引用DOM當(dāng)前獲取焦點(diǎn)的元素
元素獲取焦點(diǎn)的方式：1.頁面加載（頁面加載中，document.activeElement為null蜗帜，加載結(jié)束為documen.body）
2.用戶輸入3.代碼調(diào)用focus()方法時(shí)
3.HTMLDocument的變化
readyState屬性
有兩個(gè)可能的值：
loading，正在加載文檔
complete 已經(jīng)加載完文檔
用它來作為一個(gè)文檔加載完成的指示器：
if(document.readyState == 'complete'){
//執(zhí)行的操作
}
兼容模式
IE6給了document一個(gè)compatMode的屬性：告訴開發(fā)人員瀏覽器采用了那種渲染模式
CSS1Compat资厉，標(biāo)準(zhǔn)模式
BackCompat 混雜模式
head屬性
document.head 引用文檔的<head>元素
var head = document.head || document.getElementByTagName("head")[0]
4.字符集屬性
document.charset :文檔中使用的字符集
defaultCharset ：默認(rèn)瀏覽器以及操作系統(tǒng)的設(shè)置
5.自定義數(shù)據(jù)屬性
H5規(guī)定可以為元素添加非標(biāo)準(zhǔn)屬性厅缺，但是添加前綴 data- 可以隨意添加，隨意命名哦
<div id = "myDiv" data-appId = "12345" data-name ="nike"></div>
訪問自定義屬性的值宴偿，通過dataset屬性來訪問湘捎，它是DOMStringMap的實(shí)例，是一個(gè)名值對兒的映射
var div = document.getElementById("myDiv")
//獲取值
var appId =div.dataset.appId
//設(shè)置值
div.dataset.appId ==23456
6.插入標(biāo)記
innerHTML
在讀模式下窄刘，innerHTML屬性返回與調(diào)用元素的所有子節(jié)點(diǎn)（包括元素 注釋 和文本節(jié)點(diǎn)）對應(yīng)的HTML標(biāo)記
在寫模式下窥妇，innerHTML會(huì)根據(jù)指定的值創(chuàng)建新的DOM樹，然后用這個(gè)DOM樹完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)
<div id="myDiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
var div = document.getElementById("myDiv")
div.innerHTML = "hello world"
//以上操作之后的dom的結(jié)構(gòu) 等于下面
<div id="myDiv">
hello world
</div>
outerHTML屬性
在讀模式下娩践，innerHTML屬性返回與調(diào)用它的元素以及所有子節(jié)點(diǎn)（包括元素 注釋 和文本節(jié)點(diǎn)）對應(yīng)的HTML標(biāo)記
在寫模式下活翩，innerHTML會(huì)根據(jù)指定的值創(chuàng)建新的DOM樹，然后用這個(gè)DOM樹完全替換調(diào)用元素
<div class="content">
<ul id=”myP“>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
var div = document.getElementById("myP")
div.outerHTML = " <p>this is a pa</p>"
//以上操作之后的dom的結(jié)構(gòu) 等于下面
<div class="content">
<p>this is a pa</p>
</div>
insertAdjacentHTML()方法
接受兩個(gè)參數(shù)：插入位置和要插入的HTML文本
- beforebegin 在當(dāng)前元素之前插入一個(gè)緊鄰的同輩元素
- afterbegin 在當(dāng)前元素之下插入一個(gè)新的元素或在第一個(gè)子元素之前再插入新的新元素
- beforebeend 在當(dāng)前元素之下插入一個(gè)新的元素或在第一個(gè)子元素之后再插入新的新元素
- afterend 在當(dāng)前元素之前插入一個(gè)緊鄰的同輩元素
四.專有擴(kuò)展
contains()方法 ：當(dāng)我們需要知道某個(gè)節(jié)點(diǎn)是不是另一個(gè)節(jié)點(diǎn)的后代
接受一個(gè)參數(shù)翻伺，即要檢測的后代節(jié)點(diǎn)
//true
alter(document.documentElement.contains(document.body))
innerText 屬性
在讀模式下材泄，innerText屬性返回與調(diào)用元素的所有文本元素，包含子文檔中的文本
在寫模式下吨岭，innerText會(huì)刪除元素所有子節(jié)點(diǎn)拉宗，插入包含相應(yīng)文本值的文本節(jié)點(diǎn)
outerText 屬性
在讀模式下，outerText屬性返回與調(diào)用元素的所有文本元素辣辫，包含子文檔中的文本
在寫模式下旦事，outerText會(huì)替換整個(gè)元素（包括子元素）
