DOM相对应Html5的扩展
一.选择符API
1. querySelector()方法 ：接收一个CSS选择符 ，返回与该模式匹配的第一个元素，若没有匹配到返回null。
其中通过Document类型调用querySelector()方法时，会在文档元素范围内查找匹配元素；
如var body = document.querySelector("body");
通过Element类型调用querySelector()时，只会在该元素后代元素的范围内查找匹配元素
如var img = document.body.querySelector("img.button");
2. querySelectorAll()方法 ：接收一个CSS选择符 ，返回与该模式匹配的所有元素，返回一个Nodelist实例（类Array）若没有匹配到返回null。
所以可以使用Array的一些熟悉如item() [] length
3. matchesSelector()方法：接收一个css选择符，如果调用元素与该选择符匹配，返回true。否则返回false.
二.元素遍历
对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点点。这样会导致用DOM0时使用childNodes和firstChild等熟悉时的行为不一致。为了弥补这一差异 Element Traversal API 为DOM元素添加了一下5个属性：
childElementCount: 返回子元素的个数(不包括文本节点和注释）
firstElementChild: 指向第一个子元素 （firstchild的元素版）
lastElementChild: 指向最后一个子元素 （lastchild的元素版）
previousElementSibling:指向前一个同辈元素
nextElementSibling:指向后一个同辈元素
三.HTML5与JavaScript的扩充
1.getElementsByClassName()方法：接收一个参数包含一个或多个类名字符串（类名的先后顺序不重要）返回带有指定类的所有元素的NodeList。
好处：方便地为带有某些类的元素添加事件处理程序，从而不必再局限于使用ID或标签名
2.HTML5新增了classList属性 来操作类名的。 add（value）：将指定的字符串添加到列表中。如果值已经存在，就不添加了
contain（value）表示列表中是否存在给定的值，如果存在则返回true ；remove（value）从列表中删除给定的字符串；
toggle（value） 如果列表中已经存在给定的值，删除它，如果列表中没有给定的值则添加它。
注：有了classList属性，除非你需要全部删除所有类名，或者完全重写元素的class属性，否则就用不到className属性了
目前支持classList属性的浏览器有Firefox3.6+ 和chrome
3.焦点的管理
首先是document.activeElement属性 获得焦点是document.activeElement属性的值为true 默认情况下文档刚刚加载完成时，
document.activeElement中保存的是document.body元素的引用。文档加载期间，document.ativeElement的值为null.
然后是document.hasFocus()方法 用于确定文档是否获得了焦点
目前实现这两种属性的浏览器包括IE4+ firefox3+ safari4+ chrome 和Opera8+
4.在HTML5中HTMLDocumenet的变化
1.document.readyState属性用于保存两个可能的值一是loading 正在加载文档 二是complete已经加载完文档
以前实现这两种属性的浏览器包括IE4+ firefox3.6+ safari chrome 和Opera9+但现在HTML5纳入了标准
2.document.compatMode的值 在标准模式下是CSS1Compat 在混杂模式是BackCompat
以前实现这两种属性的浏览器包括IE6+ firefox safari3.1+ chrome 和Opera但现在HTML5纳入了标准
3.document.head属性 它与document.getElementByTagName("head")[0]是一样的
可使用 var head = document.head || document.getElementByTagName("head")[0] 来实现兼容
4.document.charset HTML5中默认使用的是“UTF-16” 可使用这个属性来进行设置成"UTF-8"
document.defaultCharset属性默认的字符集
支持document.charset 属性的浏览器有IE、firefox safari opera chrome
支持document.defaultCharset属性的浏览器有IE safari chrome
5.如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能便
地知道点击来自页面中的哪个部分 在HTML5中使用创建自定义属性是前面要加一个前缀
目前支持自定义数据属性的浏览器有Firefox6+ 和chrome
6.innerHTML属性返回与调用元素的所有子节点对应的HTML标记（包括元素、注释和文本节点） 使用innerHTML属性有些限制：一是通过
innerHTML插入<script>元素并不会执行其中的脚本（读模式和写模式的概念与差别还不清楚）
outerHTML属性返回调用它的元素及所有子节点的HTML标签；它显示的内容还包括最为一层的标签
支持outerHTML属性的浏览器有IE4+ safari4+ chrome 和Opera8+ firefox8+
insertAdjacentHTML()方法，它是插入标记的新增方式；接收两个参数：插入位置和要插入的HTML文本
第一个参数有4个选项且必须是小写 ：一是beforebegin：在当前元素之前插入一个紧邻的同辈元素 ；二是afterbegin，在当前元素之下插
入一个新的子元素或者在第一个子元素之前再插入新的子元素；三是beforeend：在当前元素之下插入一个新的子元素或者在最后一个子元
素之后再插入新的子元素； 四是afterend，在当前元素之后插入一个紧邻的同辈元素。
如element.insertAdjcentHTML("afterend","<p> hello world !</p>") //作为后一个同辈元素插入
7.HTML5标准scrollIntoview()控制页面滚动 它可以再所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在
视口中
四.专有扩展
1.document.documentMode用于返回IE当前的文档模式。
2.element.children属性与elementchildNodes没有区别，都表示一个节点的子节点数组
3.document.documentElement.contains()通过它可以判断某个节点是不是另一个节点的后代。
相关补充：
Node表示某DOM节点
Node.classList.add();添加一个类名
Node.classList.remover();删除一个类名
Node.classList.contains();检测是否存在一个类名
Node.classList.toggle();切换一个类名(有则删除，无则添加)
X.getAttribute读取一个自定义属性
X.setAttribute设置一个自定义属性
X.dataset获取所有的自定义属性