原生的DOM操作

虚拟DOM和diff算法

虚拟dom就是用对象的方式区代真实的dom操作。

当页面打开时浏览器解析HTML元素，构建一个dom树，将状态保存起来，在内存中模拟dom操作，又会生成一个dom树，两个进行比较，根据diff算法找出不同的地方，之渲染一次不同的地方

diff算法：就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom

JS中所有全局都是window的

window的作用:在封闭空间中声明一个全局的变量
全局变量和函数都属于window

javascript

 由什么东西组成？
 ECMAScript 核心解释器(ES5和ES6)
 DOM BOM
提供最基本的功能比如:12+5  var a = 12; function show(){}
兼容性：完全兼容。

DOM 文档对象模型 Document Object Model

就是document 操作页面的。
获取元素,修改样式,创建元素
兼容性：很好，有不兼容的，但是可以解决。

节点=== 标签 ===元素

DOM树 页面结构关系

    获取子节点
        oEle.children
            只能获取一层
    获取父节点
        oEle.parentNode
            获取结构父级
        oEle.offsetParent
            获取定位父级
    获取兄弟节点
        获取上一个兄弟节点
            oEle.previousElementSibling
        获取下一个兄弟节点
            oEle.nextElementSibling
        注意：不兼容低版本IE浏览器
    获取首尾子节点
        首子节点
            aEle[0]
            oPrent.firstElementChild
        尾子节点
            aEle[aEle.length-1]
            oPrent.lastElementChild

    获取标签名
        oEle.tagName

创建
        document.createElement(‘标签名’);

插入
        后面添加
        父级.appendChild(要添加的子级)
        某一个子级前面插入
        父级.insertBefore(要插入的元素,插入谁之前);
删除
        父级.removeChild(要删的元素);

拖拽 drag

            onmousedown             鼠标按下
                获取鼠标在div中的位置
                var disX = ev.pageX-oDiv.offsetLeft
                var disY = ev.pageY-oDiv.offsetTop
            onmousemove             鼠标移动
                改变div的left和top
                oDiv.style.left = ev.pageX-disX+'px';
                oDiv.style.top = ev.pageY-disY+'px';
            onmouseup               鼠标抬起
                把onmousemove干掉
                把onmouseup干掉

    
        问题一：
            鼠标没点就懂了
            解决：
                把onmousemove放在onmousedown里面
        问题二:
            鼠标移动过快，就移出div了
            解决:
                1.把div放大        不靠谱，设计和产品会找你拼命
                以下方法靠谱
                把onmousemove事件加给document
        问题三:
            鼠标抬起依然能动
            解决:
                正在onmouseup中把onmousemove干掉
        问题四:
            鼠标拖拽的时候，会选中页面内容
            解决:
                在onmousedown中把默认事件阻止
                return false;   注意一定要放在最后