什么是DOM?
DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。在W3C的标准中，DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM由以下三部分组成：
- 核心DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，不同的浏览器下会有不同的结果甚至是有的浏览器下没结果。
现在咱们web开发使用原生操作dom节点都比较少，因为现在的框架都是属于虚拟dom，原生操作dom节点我感觉很繁琐
不知道的话自己下去搜搜
js dom 操作节点移动
方法介绍
js鼠标或坐标属性
- event.pageX/Y
- event.offsetX/y
- event.X/Y
- event.clientX/Y
clientX/Y
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变。
pageX/Y
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
offsetX/Y
offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
screenX/Y
screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。
图解
函数获取各种坐标方法
-
补充一下获取dom的方法
- 通过ID获取 document.getElementById(elementId)
- 通过name属性 document.getElementsByName(elementName)
- 通过标签名 document.getElementsByTagName
- 通过类名 document.getElementsByClassName
- 通过选择器获取一个元素document.querySelector('类名')
- 通过选择器获取一组元素document.querySelectorAll
-
获取坐标
<div class="box"> <div class="children" id="move"></div> </div> var dom = document.getElementById('move'); function down (e) { e = e || window.event; console.log(e.pageX, 'pageX') console.log(e.offsetX, 'offsetX') console.log(e.clientX, 'clientX') console.log(e.screenX, 'screenX') console.log(e.x, 'e.x') } dom.onmousedown = down
见证奇迹的时刻到啦
- 让div class 为 children 的dom节点左右移动
div（left/right）= div(clientX现在的)-（clientX原有的 - div（原来的left））
链接描述
- 让div class 为 children 的dom节点上下活动，原理其实和往左移动一样，这就不给图了
链接描述 - 两种代码合起来就可以上下移动
链接描述
改变鼠标指针（自认为）
- 上指针 n-resize
- 左下针 sw-resize
- 左上针 nw-resize
链接描述
改变div盒子大小这里就给演示左右变化
- 向左改变大小
- 向右改变大小
链接描述
缺点 如果做其他图行变化或是拖拽的话，比如菱形，不规则图形等是非常的麻烦，因为css画出的不规则图形很繁琐，不易变化
如果用canvas主要的难点就是如果你画很多的图形，不好给定位用户选择的是哪个，而且canvas移动的话是需要重新绘制的，最最重要的一点
是数学要比较好，比如勾股定理啊。。。不懂！！！
