一.选择符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()通过它可以判断某个节点是不是另一个节点的后代。

HTML5 DOM扩展