js

虚拟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(){}
兼容性：完全兼容。
1
2
3
4
5
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
创建
        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;   注意一定要放在最后

————————————————
版权声明：本文为CSDN博主「闪现.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zkl865748013/article/details/115054045