1. 选择符API
根据CSS选择符选择与某个模式匹配的DOM元素。
Selectors API的核心方法：querySelector()和querySelectorAll()，可以通过document和element类型的实例调用它们。
1.1 querySelector()方法：
接收CSS选择符，返回匹配的第一个元素，如果没有找到，返回null。
var myDiv=document.querySelector("#myDiv");
1.2 querySelectAll()方法
返回所有匹配的元素，返回结果为NodeList实例。
<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不会返回文本节点，但是非IE会返回文本节点，这样在使用firstChild等属性时导致不一致。
为了解决该问题，定义了新的属性：
childElementCount: 返回子元素（不包括文本节点和注释）个数
firstElementChild: 指向第一个子元素 ；firstChild的元素版。
lastElementChild: 指向最后一个子元素；lastChild的元素版。
previousElementSibling: 指向前一个同辈元素；previousChild的元素版。
nextElementSibling:指向后一个同辈元素；nextChild的元素版。
遍历某元素的子元素个数：
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规范围绕如何使用新增标记定义了大量JS API。其中一些与DOM重叠，定义了浏览器需要支持的DOM扩展。
3.1 与类相关的扩充：
A. getElementByClassName()方法
B. classList属性：便于对类名进行操作。
<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 焦点管理：
A. document.activeElement属性
引用DOM中当前获取焦点的元素。元素获得焦点的方法：页面加载、用户输入、代码中调用focus()方法。
var button=document.getElementsByTagName("button")[0];
button.focus();
console.log(document.activeElement==button);//true
B. document.hasFocus属性
检查文档是否获得了焦点，返回值为布尔值，该值可以确定用户是否在与页面交互。
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属性
检查浏览器渲染页面的模式是标准模式还是混杂模式。
值为CSS1Compat为标准模式，值为BackCompat为混杂模式。
if(document.compatMode=="CSS1Compat"){
alert("标准模式")
}
else {
alert("混杂模式")
}
C. head属性
console.log(document.head==document.getElementsByTagName("head")[0]);//true
3.4 字符集属性
A. document.charset返回当前文档的字符集。
B. document.defaultCharset返回默认的字符集。
3.5 自定义数据属性
添加非标准属性，需要加前缀data-，这些属性可以通过dataset属性进行访问。
<div id="myDiv" data-dd="my" data-aa="your"></div>`
` var div=document.getElementById("myDiv");
console.log(div.dataset)
3.6 插入标记
A. innerHTML属性
返回调用元素的所有子节点对应的HTML标记。在写模式下，会替换原有的子节点。
<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>"//div元素将不存在
C. insertAdjacentHTML()方法
与前两种方式相比，加入了位置插入，可以作为同辈元素或者子元素插入。
第一个参数的值：
beforebegin:前一个同辈元素
afterbegin：第一个子元素
beforeend：最后一个子元素
afterend：后一个同辈元素
var div=document.getElementById("myDiv");
div.insertAdjacentHTML("beforeend","<p>im</p>")
D. 内存与性能问题
如果使用上述替换子节点的方法，如果元素被删除，但是该元素存在事件处理程序，该元素与事件的绑定关系会存在于内存中。因此最好手工删除事件。并且需要控制innerHTML和outerHTML的次数，因为它们会创建HTML解析器，创建和销毁HTML解析器会导致性能损失。
4. 专有扩展
4.1 children属性：
只包含元素中为元素的子节点
4.2 contains()方法
用处：检查某个节点是否是另一个节点的后代
var div=document.getElementById("myDiv");
console.log(document.documentElement.contains(div));//div是html元素的后代
4.3 插入文本
A. innerText属性
读：返回所有文本内容
<div id="myDiv">
<p>哈哈</p>
<p>hh</p>
</div>
var div=document.getElementById("myDiv");
console.log(div.innerText);//哈哈 hh
写：将其子节点进行替换
var div=document.getElementById("myDiv");
div.innerText="替换";
console.log(div);
4.4 outerText属性
作用范围扩大到调用节点，当读时与innerText相同，写时，会替换整个元素。
