DOM

节点操作

创建标签：
        document.creatElement(标签名)

插入标签：
        父元素.appendChild(子元素)
        父元素.insertBefore(新，旧)    --   将新的子标签放在旧的子标签的前面 
        
替换标签：
        父元素.replaceChild(新，旧)

复制标签：
        标签.cloneNode(true)
        
删除标签：
        父元素.removeChild(子元素)    --    子元素.parentElement.removeChild(子) 

获取标签：
        所有子元素：
                    父元素.children
        第一个子元素：
                    父元素.firstElementChild
        最后一个子元素：
                    父元素.lastElementChild
        父元素：
                    子元素.parentElement
        上一个兄弟：
                    标签.previousElementSibling
        下一个兄弟：
                    标签.nextElementSibling
                    
标签大小:
        带边框：
                标签.offsetWidth
                标签.offsetHeight
        不带边框：
                标签.clientWidth
                标签.clientHeight
        标签位置：
                标签.offsetLeft
                标签.offsetTop

        边框厚度:
                标签.clientLeft
                标签.clientTop
                
 不包含滚动条的窗口大小：
                 document.documentElement.clientWidth
                 document.documentElement.clientHeight
                 

回流和重绘

浏览器的渲染过程：
               解析HTML成DOM树，同时解析css成样式规则
               合并成渲染树
               布局  -- 计算标签大小、关系、位置
               喷绘  -- 绘制颜色
               浏览器显示
回流：
       操作需要重新布局
重回： 
       操作需要重新喷绘

回流和重回都影响了渲染性能 

优化：
               合并样式修改：
                       cssText
                       style属性
                       类名
               优化批量的DOM操作：
                       隐藏，操作，显示
                       复制，操作，替换        
                       文档碎片  
               优化定时器中的DOM操作：
                       将定时器中获取标签的操作，放在定时器外面