BOM

概念：
    BOM：browser object model的缩写 --浏览器对象模型-使用由对线组成的结构操作浏览器
navigator --存储浏览器信息
🚩history -- 操作浏览器的历史记录：
        history.back()  -- 后退一个页面
        history.forward() -- 前进一个页面
        history.go() -- 前进或后退多个页面：
                                        正数是前进
                                        负数是后退
                                        前进后退几个页面，就看数字是几
🚩location -- 操作地址栏url：
        herf：
            设置完整的地址 -- location.href=新地址
            获取完整的地址 -- location.href
        search：
            设置地址栏参数 -- location.search=?键=值&键=值
            获取地址栏参数 -- location.search
        hash：
            设置锚点 -- location.hash=#单词
            获取锚点 -- location.hash
  窗口大小：包含了滚动条的宽和高
      innerWidth  
      innerHeight 
🚩浏览器专属事件：
            window.onload -- 当所有资源加载完成后，触发执行
            window.onresize -- 当浏览器窗口大小发生改变，触发执行
            window.onscroll -- 当浏览器卷去的距离发生改变，触发执行
   浏览器的方法：
            弹出层：
                   alert
                   confirm
                   prompt
            全局定义的函数，都是属于window的方法
            全局定义的变量，都是属于window的属性
        
    🚩🚩🚩定时器：
        
            语法：
                周期性定时器：setInterval(函数,毫秒数) -- 让函数每隔多少毫秒数，就执行一次，会不停的执行下去
            语法：
                一次性定时器：setTimeout(函数,毫秒数) -- 让函数延迟毫秒数执行一次，就这一次
            共同点：
                返回值：
                    都代表当前页面中的第几个定时器 -- 数字
                停止定时器：
                    使用返回值：
                        clearInterval(返回值)
                        clearTimeout(返回值)
            打开新的标签页 -- window.open(url)
            设置卷去的距离 -- window.scrollTo(x,y)
            关闭窗口 -- window.close()                

DOM

    概念：
        DOM：document object model的缩写 -- 文档对象模型-由对象组成的结构操作html文档
    查找元素：
            🚩document.querySelector(css选择器) -- 获取满足css选择器的第一个标签 -- 返回一个标签
            🚩document.querySelectorAll(css选择器) -- 获取所有满足css选择器的标签 -- 返回一个集合
            注意：不能对着集合直接进行操作
            document.getElementById() -- 通过id去查找元素
            document.getElementsByClassName() -- 通过class类名去查找元素 
            document.getElementsByTagName() -- 通过标签名去查找元素
    获取html基本结构标签：
            HTML -- document.documentElement
          🚩body -- document
            head -- document.head
            网页标题 -- document.title：
                                可以获取标题
                                可以设置标题
    🚩获取标签名：
                标签.tagName
    🚩操作内容：
            双标签：
                文本内容：
                    设置 -- 标签.innerText=值
                    获取 -- 标签.innerText
                带标签的内容：
                    设置 -- 标签.innerHTML=值
                    获取 -- 标签.innerHTML
            表单：
                设置 -- 标签.value=值
                获取 -- 标签.value
    🚩操作属性：
            设置属性 -- 标签.setAttribute(属性名,值)
            获取属性 -- 标签.getAttribute(属性名)
            删除属性 -- 标签.removeAttribute(属性名)
    样式操作：
            获取样式 -- getComputedStyle(标签) - 返回由所有css键值对组成的对象
          🚩设置样式 -- 标签.style.css键=值 - 设置到行内
    🚩类名操作：
            直接操作class属性值：
                    标签.className=值
                    标签.className
            classList：
                    add() -- 添加一个类名
                    remove() -- 删除一个类名
                    contains() -- 判断是否有这个类名
                    toggle() -- 让类名在删除和添加之间切换
    🚩获取卷去的距离：
            有文档声明：
                    var t=document.documentElement.scrollTop
            没有文档声明：
                    var t=document.body.scrollTop
            具有兼容性 - 兼容性写法：
                    var t=document.documentElement.scrollTop||document.body.scrollTop
            可以赋值 
    🚩短路运算：
            使用逻辑运算符 && 和 || 给变量进行赋值：
                    var 变量=值1&&值2：
                            如果左边为true，就会将右边的值赋值给变量
                            如果左边为false，就会将左边的值赋值给变量
                    var 变量=值1||值2：
                            如果左边为true，就会将左边的值赋值给变量
                            如果左边为false，就会将右边的值赋值给变量
    🚩获取节点：
            概念：
                DOM就是html结构中一个一个节点构成的，不光标签是一个节点，文本内容也是一个节点，注释，包括空格都是节点
            DOM节点分三种：
                元素节点、文本节点、属性节点、。元素节点就是我们获取到的标签元素;标签里面的文本就是文本节点，标签上的属性就是属性节点
            获取节点：
                语法：
                    父标签.children -- 所有子标签节点 - 获取到的是一个所有子标签组成的伪数组
                    父标签.firstElementChild -- 第一个子标签节点
                    父标签.lastElementChild -- 最后一个子标签节点
                    子标签.parentElement -- 父标签节点
                    标签.previouseElementSibling -- 前面一个兄弟标签节点
                    标签.nextElementSibling -- 后面一个兄弟标签节点
    创建标签：
            语法：
                document.createElement('标签名字符串')
                例：
                    var div=document.createElement('div')
    插入节点：
            语法：
                给父标签追加子标签：
                        父标签.appendChild(子标签对象)
                        例：
                            body.appendChild(div)
                将新的子标签插入到某个旧的子标签前面：
                        父标签.insertBefore(新的子标签,旧的子标签)
                        例：
                            div.insertBefore(.box,.big)
    替换节点：
            语法：
                使用新的子标签替换掉旧的子标签：
                        父标签.removeChild(新的子标签,旧的子标签)
                        例：
                            div.removeChild(.box,.big)
    删除节点：
            语法：
                父标签将指定的子标签删除：
                        父.removeChild(子标签)
                        例：
                            body.removeChild(.box)
    克隆节点：
            语法：
                将一个标签复制一份出来：
                        标签.cloneNode() -- 返回一个标签对象，这样只能复制一个空的标签，没有内容。
                        例：
                            div.cloneNode('div')
                返回一个标签对象，这样只能复制一个空的标签，没有内容
                        标签.cloneNode(true) --返回一个标签对象，这样可以将标签中的内容也复制出来。
    获取标签尺寸：
            语法：
                包含标签边框的尺寸：
                    标签.offsetWidth
                    标签.offsetHeight
                    例：
                        var w=div.offsetWidth
                        var h=div.offsetHeight
                     console.log(w,h)
                 不包含标签边框的尺寸：
                    标签.clientWidth
                    标签.clientHeight
                    例：
                        var w=div.clientWidth
                        var h=div.clientHeight
                     console.log(w,h)
             -- 返回纯数字 -- 
    获取元素位置：
            语法：
                标签.offsetLeft
                标签.offsetTop
                例：
                    var L=div.offsetLeft
                    var T=div.offsetTop
                    console.log(L,T)
            -- 获取的是相对于设置过定位的父标签的左边距和上边距，返回纯数字 --
    获取边框大小：
            语法：
                标签.clientTop
                标签.clientLeft
                例：
                   var L=div.clientLeft
                   var T=div.clientTop 
                   console.log(L,T)
           -- 获取到的是上边框和左边框的厚度，返回纯数字 --   

回流和重绘

```
    浏览器渲染过程：                              
            浏览器会先解析html成DOM树，同时解析css成样式规则 
            将DOM树和css规则合成渲染树              
            计算标签关系、位置、大小                
            给标签涂颜色                        
            让浏览器显示
    回流：
            如果动态操作了标签的节点、位置、大小，浏览器需要重新计算标签的大小和位置，也就造成了回流
    重绘：
            如果动态操作了标签的颜色等属性，就需要重新喷绘，也就造成了重绘 
    -- 无论回流和重绘都影响了浏览器的渲染性能 --
    优化：
            合并样式修改
            例：
                var oDiv = document.querySelector('.box');
                oDiv.style.padding = '5px';
                oDiv.style.border = '1px solid #000';
                oDiv.style.margin = '5px';
            解决：使用style的cssText：
                oDiv.style.cssText = 'padding:5px; border:1px solid #000; margin:5px;';
            减少批量的dom操作
            例：
                    var data = [
                    {
                        id:1,
                        name:"商品1",
                    },
                    {
                        id:2,
                        name:"商品1",
                    },
                    {
                        id:3,
                        name:"商品1",
                    },
                    {
                        id:4,
                        name:"商品1",
                    },
                    // 假设后面还有很多
                ];
                var oUl = document.querySelector("ul");
                for(var i=0;i<data.length;i++){
                    var oLi = document.createElement("li");
                    oLi.innerText = data[i].name;
                    oUl.appendChild(oLi);
                }
            解决：
                方法1：方法一：隐藏ul后，给ul添加节点，添加完成后再将ul显示
                oUl.style.display = 'none';
                    for(var i=0;i<data.length;i++){
                        var oLi = document.createElement("li");
                        oLi.innerText = data[i].name;
                        oUl.appendChild(oLi);
                    }
                    oUl.style.display = 'block';
                    
                    
               方法二：创建文档碎片，将所有li先放在文档碎片中，等都放进去以后，再将文档碎片放在ul中 
               var fragment = document.createDocumentFragment();
                        for(var i=0;i<data.length;i++){
                            var oLi = document.createElement("li");
                            oLi.innerText = data[i].name;
                            fragment.appendChild(oLi);
                        }
                        oUl.appendChild(fragment);
                        
                        
               方法三：将ul拷贝一份，将所有li放在拷贝中，等都放进去以后，使用拷贝替换掉ul
               var newUL = oUl.cloneNode(true);
                    for(var i=0;i<data.length;i++){
                        var oLi = document.createElement("li");
                        oLi.innerText = data[i].name;
                        newUL.appendChild(oLi);
                    }
                    oUl.parentElement.replaceChild(newUl, oUl);
                    
                    
                
            优化定时器中的dom操作
            例：
                goBack.onclick = function(){
                    setInterval(function(){
                        var t = document.documentElement.scrollTop || document.body.scrollTop;
                        t += 10;
                        document.documentElement.scrollTop = document.body.scrollTop = t;
                    },20)
                }
            解决：只获取一次，每次都让数字递增，避免每次都获取滚动过的距离
                goBack.onclick = function(){
                        var t = document.documentElement.scrollTop || document.body.scrollTop;
                        setInterval(function(){
                            t += 10;
                            document.documentElement.scrollTop = document.body.scrollTop = t;
                        },20)
                    }
            
```