一.选择符API
1.querySelector()方法
接受一个CSS选择符，返回一个与这个模式匹配的第一个元素，如果没有，则返回null
//取得body元素
var body = document.querySelector("body"）
//取得id为myId的元素
var myId = document.querySelector("#myId"）
//取得class为.selected的第一个元素
var selected = document.querySelector(".selected"）
2.querySelectorAll()方法
接受一个CSS选择符，返回一个与这个模式匹配的所有元素的NodeList实例，如果没有匹配元素，返回空Nodelist实例
//取得id为myDiv里面所有的<em>元素
var ems = document.getElementById("myDiv").querySelectorAll("em"）
//取得class为.selecteds的所有元素
var selecteds = document.querySelectorAll(".selected"）
3.matchesSelector()方法
接受一个CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false
if(document.body.matchesSelector("body.page1")){
//true
}
兼容行问题：这个方法支持IE9+，Firefox 3.6+，而Safari 5+和Chrome要通过wbkitMatchesSelector()
二.元素遍历
为什么会提到这个问题？其实是 对于元素之间的空格，IE9以及之前的版本是不会返回文本节点的，这就导致了childNodes还有firstChild属性行为不一致，为解决这一问题，Element Traversal规范定义了一组属性
- childElementCount 返回子元素的个数（不包括文本节点和注释）
- firstElementChild 返回第一个元素
- lastElementChild 返回最后一个元素
- previousElementSibling 指向前一个同辈元素
- nextElementSibling 指向后一个同辈元素
兼容行问题：Element Traversal规范支持IE9+，Firefox 3.5+，而Safari 4+和Chrome Opera 10+
三.HTML5
DOM扩展，为什么涉及到H5？？？
其实是H5新增了标记，H5规范围绕这些新增标签定义了大量的JavaScript API, 一些API与DOM重叠
1.与类相关的扩充
getElementByClassName()方法
接受一个包含一个或者多个类名的字符串，返回带有指定类的所有元素的NodeList实例，传入类名顺序不重要
//获取所有类中包含username和current的元素 ，类名顺寻无所谓
var eles = document.getElementByClassName("username current")
兼容行问题：这个方法支持IE9+，Firefox 3+，而Safari 3.1+和Chrome Opera 9.5+
classList属性
我们操作元素的类名时，通过className属性来增加，删除，修改类型，但是如果我们只是想对某一个类名操作，只有className的话，想一下过程，通过className获取到类名字符串，对字符串修改，改完在通过className重新设计，复杂，针对这一点，H5新增了一些操作类名的方法：
它为所有元素添加了 classList属性 ，这个属性是新集合类型DOMTokenlist的实例，DOMTokenlist，也有length属性，取得每个元素可以使用 item()方法也可以使用方括号，还定义了一些方法
- add(value) 把给定的值添加到列表中，如果已经存在，不添加
- contain(value) 查看列表中存在给定的值吗，存在返回true，不存在返回false
- remove(value) 从列表中删除字符串
- toggle(value) 如果列表中已存在给定值，删除，如果列表中不存在，添加
兼容行问题：classList属性支持Firefox 3.6+和Chrome
2.焦点管理
document.activeElement属性 ：始终引用DOM当前获取焦点的元素
元素获取焦点的方式：1.页面加载（页面加载中，document.activeElement为null，加载结束为documen.body）
2.用户输入3.代码调用focus()方法时
3.HTMLDocument的变化
readyState属性
有两个可能的值：
loading，正在加载文档
complete 已经加载完文档
用它来作为一个文档加载完成的指示器：
if(document.readyState == 'complete'){
//执行的操作
}
兼容模式
IE6给了document一个compatMode的属性：告诉开发人员浏览器采用了那种渲染模式
CSS1Compat，标准模式
BackCompat 混杂模式
head属性
document.head 引用文档的<head>元素
var head = document.head || document.getElementByTagName("head")[0]
4.字符集属性
document.charset :文档中使用的字符集
defaultCharset ：默认浏览器以及操作系统的设置
5.自定义数据属性
H5规定可以为元素添加非标准属性，但是添加前缀 data- 可以随意添加，随意命名哦
<div id = "myDiv" data-appId = "12345" data-name ="nike"></div>
访问自定义属性的值，通过dataset属性来访问，它是DOMStringMap的实例，是一个名值对儿的映射
var div = document.getElementById("myDiv")
//获取值
var appId =div.dataset.appId
//设置值
div.dataset.appId ==23456
6.插入标记
innerHTML
在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素 注释 和文本节点）对应的HTML标记
在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点
<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的结构 等于下面
<div id="myDiv">
hello world
</div>
outerHTML属性
在读模式下，innerHTML属性返回与调用它的元素以及所有子节点（包括元素 注释 和文本节点）对应的HTML标记
在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素
<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的结构 等于下面
<div class="content">
<p>this is a pa</p>
</div>
insertAdjacentHTML()方法
接受两个参数：插入位置和要插入的HTML文本
- beforebegin 在当前元素之前插入一个紧邻的同辈元素
- afterbegin 在当前元素之下插入一个新的元素或在第一个子元素之前再插入新的新元素
- beforebeend 在当前元素之下插入一个新的元素或在第一个子元素之后再插入新的新元素
- afterend 在当前元素之前插入一个紧邻的同辈元素
四.专有扩展
contains()方法 ：当我们需要知道某个节点是不是另一个节点的后代
接受一个参数，即要检测的后代节点
//true
alter(document.documentElement.contains(document.body))
innerText 属性
在读模式下，innerText属性返回与调用元素的所有文本元素，包含子文档中的文本
在写模式下，innerText会删除元素所有子节点，插入包含相应文本值的文本节点
outerText 属性
在读模式下，outerText属性返回与调用元素的所有文本元素，包含子文档中的文本
在写模式下，outerText会替换整个元素（包括子元素）
