1. 选择符API

        querySelector()          返回匹配的第一个元素，接收一个 CSS 选择符。没有找到返回 null.

        querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变。接收一个 CSS 选择符。

        mathesSelecttor()      如果调用元素与该选择符匹配，返回true, 否则返回 false. 接收一个 CSS 选择符。

 

2. 与类相关的扩充

        getElementsByClassName()      接收一个字符串

        classList         所有元素都有的属性，它是 DOMTokenList 的实例，有 length 属性和以下方法：

                    add(value) : 将给定的字符串添加到列表中，如果已经存在，就不添加了

                    contains(value) : 表示列表中是否存在给定的值

                    remove(value) : 从列表中删除给定的字符串

                    toggle(value) : 如果存在删除它；如果不存在添加它。

3. 焦点管理

        document.activeElement   这个属性始终会引用 DOM 中当前获取焦点的元素。

                                                     元素获取焦点的方式有页面加载、用户输入（通常是通过按 Tab 键）和在代码中调用 focus() 方法。

        document.hasFocus();       检测文档是否获取了焦点。

 

4. 自定义数据类型

        <div id=‘myDiv‘ data-appId=‘12345‘ data-myName=‘Nicholad‘></div>

         var addpId = div.dataset.appId;          // 获取自定义数据

         div.dataset.appId = 2345;                    // 设置自定义数据

 

5. 插入标记

            element.innerHTML                  // 在写模式下，innerHTML 的值（字符串）替换元素原来的所有子节点， 在读模式下，读取所有子节点

            element.outerHTML                    //  在读模式下，返回调用它的元素及所有子节点的 HTML 标签，在写模式下，会根据指定的 HTML 字符串创建新的DOM子树，替换调用的元素。

6. 元素大小

            6.1 偏移量

                    

             6.2 客户区大小

                      

           6.3 确定元素大小

                        element.getBoundingClientRect();    返回一个矩形对象。这个对象包含4个属性：left, top, right, botom。这些属性都给出了元素在页面中相对于视口的位置。

        

          6.4 遍历

                        var div = document.getElementById(‘#div1‘);

                        var filter = function(node){

                                retrun node.tagName.toLowerCase() == ‘li‘ ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;

                        }

                        var iterater = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);             // 第三个参数表示过滤节点，不过滤传入 null
                        var node = iterator.nextNode();

                        while(node != null){

                                alert(node.tagName);

                                node = iterator.nextNode();