1. 選擇符API
根據(jù)CSS選擇符選擇與某個(gè)模式匹配的DOM元素虹钮。
Selectors API的核心方法：querySelector()和querySelectorAll()，可以通過document和element類型的實(shí)例調(diào)用它們。
1.1 querySelector()方法：
接收CSS選擇符奈附，返回匹配的第一個(gè)元素，如果沒有找到怀偷，返回null宠叼。
var myDiv=document.querySelector("#myDiv");
1.2 querySelectAll()方法
返回所有匹配的元素，返回結(jié)果為NodeList實(shí)例芜赌。
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
var divs=document.querySelectorAll("div");
console.log(divs);
console.log(divs.item(0)==divs[0])//true
2. 元素遍歷
對于元素之間的空格仰挣，IE不會返回文本節(jié)點(diǎn)，但是非IE會返回文本節(jié)點(diǎn)缠沈，這樣在使用firstChild等屬性時(shí)導(dǎo)致不一致膘壶。
為了解決該問題，定義了新的屬性：
childElementCount: 返回子元素（不包括文本節(jié)點(diǎn)和注釋）個(gè)數(shù)
firstElementChild: 指向第一個(gè)子元素 洲愤；firstChild的元素版颓芭。
lastElementChild: 指向最后一個(gè)子元素；lastChild的元素版柬赐。
previousElementSibling: 指向前一個(gè)同輩元素亡问；previousChild的元素版。
nextElementSibling:指向后一個(gè)同輩元素肛宋；nextChild的元素版州藕。
遍歷某元素的子元素個(gè)數(shù)：
var i=1,len;
var child=document.body.firstElementChild;
while(child!=document.body.lastElementChild){
if(child.nodeType==1){
i+=1;
}
child=child.nextElementSibling;
}
3. HTML5
HTML5規(guī)范圍繞如何使用新增標(biāo)記定義了大量JS API。其中一些與DOM重疊酝陈，定義了瀏覽器需要支持的DOM擴(kuò)展床玻。
3.1 與類相關(guān)的擴(kuò)充：
A. getElementByClassName()方法
B. classList屬性：便于對類名進(jìn)行操作。
<div class="bd user disabled"></div>
var div=document.getElementsByTagName("div")[0];
var classlist=div.classList;
console.log(classlist)
方法：
add(value):添加屬性
contain(value):檢查是否存在某屬性沉帮，返回布爾值
remove(value):刪除屬性
toggle(value):如果存在锈死，刪除，不存在遇西，添加馅精。
var div=document.getElementsByTagName("div")[0];
var classlist=div.classList;
classlist.add("new");
classlist.remove("bd");
classlist.toggle("disabled");
console.log(classlist)
3.2 焦點(diǎn)管理：
A. document.activeElement屬性
引用DOM中當(dāng)前獲取焦點(diǎn)的元素。元素獲得焦點(diǎn)的方法：頁面加載粱檀、用戶輸入洲敢、代碼中調(diào)用focus()方法。
var button=document.getElementsByTagName("button")[0];
button.focus();
console.log(document.activeElement==button);//true
B. document.hasFocus屬性
檢查文檔是否獲得了焦點(diǎn)茄蚯，返回值為布爾值压彭，該值可以確定用戶是否在與頁面交互睦优。
var button=document.getElementsByTagName("button")[0];
button.focus();
alert(document.hasFocus());//true
3.3 HTMLDocument的變化
A. readyState屬性
檢查文檔是否加載完畢，值：loading（正在加載）,complete（加載完畢）
if(document.readyState=="complete"){
}
B. 兼容模式：compatMode屬性
檢查瀏覽器渲染頁面的模式是標(biāo)準(zhǔn)模式還是混雜模式壮不。
值為CSS1Compat為標(biāo)準(zhǔn)模式汗盘，值為BackCompat為混雜模式。
if(document.compatMode=="CSS1Compat"){
alert("標(biāo)準(zhǔn)模式")
}
else {
alert("混雜模式")
}
C. head屬性
console.log(document.head==document.getElementsByTagName("head")[0]);//true
3.4 字符集屬性
A. document.charset返回當(dāng)前文檔的字符集询一。
B. document.defaultCharset返回默認(rèn)的字符集隐孽。
3.5 自定義數(shù)據(jù)屬性
添加非標(biāo)準(zhǔn)屬性，需要加前綴data-健蕊，這些屬性可以通過dataset屬性進(jìn)行訪問菱阵。
<div id="myDiv" data-dd="my" data-aa="your"></div>`
` var div=document.getElementById("myDiv");
console.log(div.dataset)
3.6 插入標(biāo)記
A. innerHTML屬性
返回調(diào)用元素的所有子節(jié)點(diǎn)對應(yīng)的HTML標(biāo)記。在寫模式下缩功，會替換原有的子節(jié)點(diǎn)晴及。
<div id="myDiv">
<p>哈哈</p>
</div>
var div=document.getElementById("myDiv");
console.log(div.innerHTML)// <p>哈哈</p>
div.innerHTML="<p>嘻嘻</p>"
console.log(div.innerHTML)//<p>嘻嘻</p>
B. outerHTML屬性
讀模式：返回該元素以及其子元素
var div=document.getElementById("myDiv");
console.log(div.outerHTML)
寫模式：替換該元素
var div=document.getElementById("myDiv");
div.outerHTML="<p>hh</p>"http://div元素將不存在
C. insertAdjacentHTML()方法
與前兩種方式相比，加入了位置插入嫡锌，可以作為同輩元素或者子元素插入虑稼。
第一個(gè)參數(shù)的值：
beforebegin:前一個(gè)同輩元素
afterbegin：第一個(gè)子元素
beforeend：最后一個(gè)子元素
afterend：后一個(gè)同輩元素
var div=document.getElementById("myDiv");
div.insertAdjacentHTML("beforeend","<p>im</p>")
D. 內(nèi)存與性能問題
如果使用上述替換子節(jié)點(diǎn)的方法，如果元素被刪除势木，但是該元素存在事件處理程序蛛倦，該元素與事件的綁定關(guān)系會存在于內(nèi)存中。因此最好手工刪除事件跟压。并且需要控制innerHTML和outerHTML的次數(shù)胰蝠，因?yàn)樗鼈儠?chuàng)建HTML解析器，創(chuàng)建和銷毀HTML解析器會導(dǎo)致性能損失震蒋。
4. 專有擴(kuò)展
4.1 children屬性：
只包含元素中為元素的子節(jié)點(diǎn)
4.2 contains()方法
用處：檢查某個(gè)節(jié)點(diǎn)是否是另一個(gè)節(jié)點(diǎn)的后代
var div=document.getElementById("myDiv");
console.log(document.documentElement.contains(div));//div是html元素的后代
4.3 插入文本
A. innerText屬性
讀：返回所有文本內(nèi)容
<div id="myDiv">
<p>哈哈</p>
<p>hh</p>
</div>
var div=document.getElementById("myDiv");
console.log(div.innerText);//哈哈 hh
寫：將其子節(jié)點(diǎn)進(jìn)行替換
var div=document.getElementById("myDiv");
div.innerText="替換";
console.log(div);
4.4 outerText屬性
作用范圍擴(kuò)大到調(diào)用節(jié)點(diǎn)，當(dāng)讀時(shí)與innerText相同躲庄，寫時(shí)查剖，會替換整個(gè)元素。
