DOM扩展

<!-- 

        选择符api：

            通过css选择器来选择

            querySelect（）

            querySelectAll（）返回一个nodelist实例，同样可以使用nodelist中的方法来找寻元素

            matchesSelector（）

                使用这个方法检测元素是否被querySelect（）和querySelectorAll（）返回，浏览器支持性不好

     -->

     <!-- 

         元素遍历（一下五个方法兼容ie9+）

         childElementCount（）返回子元素个数（不包括文本节点和注释）

         firstElementChild（） firstChild的元素版

         lastElementChild（） lastChild的元素版

         previousElementSibling（） previousSibling的元素版

         nextElementSibling（） nextSibling的元素版

         注意：ie9之前那版本不会返回文本节点，其它浏览器会返回文本节点也就是空格，导致了行为不一致

      -->

      <!--

         HTML5：

            getElementsByClassName（） ie9+

            辅助焦点管理：

              document.activeElement属性

                    var button = document.getElementById（'button'）;

                    button.focus();

                    alert(document.activeElement === button); // true

              document.hasFocus()方法确定文档中是否获得了焦点 ie4+

                    var button = document.getElementById('button');

                    button.focus();

                    alert(doxument.hasFocus())  // true检测用户是否再交互

            插入标记：

                innerHTML属性

                outerHTML属性

                insertAdjacentHTML（）

                    参数：接收两个参数插入位置和插入文本

                    beforebegin： 当前元素之前插入一个紧邻的同辈元素

                    afterbegin： 当前元素之下插入一个子元素或者再第一个元素之前再插入新的子元素

                    beforeend： 再当前元素之下插入一个新的子元素或者再最后一个元素之后再插入新的子元素

                    afterend： 再当前元素之后插入一个紧邻的同辈元素

            性能问题：

                上述替换子节点的方法会导致浏览器的内存占用问题，假如某个元素绑定有事件处理函数，当删除节点后内存依然保存有该函数

            children属性

                包含元素中同样还是元素的子节点

            检测是否包含某个子节点;

                contains()

                document.documentElement.contains(document.body)

            插入文本（火狐不支持）

                innerText

                outerText

                textContent（火狐支持的）

                

       -->