js dom操做 pageX,pageY,offsetX,offsetY,clientX/Y,screenX/Y 介绍使用

什么是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获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。

图解

函数获取各类坐标方法

1. 补充一下获取dom的方法

   • 经过ID获取 document.getElementById(elementId)
   • 经过name属性 document.getElementsByName(elementName)
   • 经过标签名 document.getElementsByTagName
   • 经过类名 document.getElementsByClassName
   • 经过选择器获取一个元素document.querySelector('类名')
   • 经过选择器获取一组元素document.querySelectorAll

2. 获取坐标

   <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

见证奇迹的时刻到啦

1. 让div class 为 children 的dom节点左右移动
   div（left/right）= div(clientX如今的)-（clientX原有的 - div（原来的left））
   连接描述

1. 让div class 为 children 的dom节点上下活动，原理其实和往左移动同样，这就不给图了
   连接描述
2. 两种代码合起来就能够上下移动
   连接描述

改变鼠标指针（自认为）

• 上指针 n-resize
• 左下针 sw-resize
• 左上针 nw-resize

连接描述

改变div盒子大小这里就给演示左右变化

• 向左改变大小
• 向右改变大小

连接描述

缺点 若是作其余图行变化或是拖拽的话，好比菱形，不规则图形等是很是的麻烦，由于css画出的不规则图形很繁琐，不易变化 若是用canvas主要的难点就是若是你画不少的图形，很差给定位用户选择的是哪一个，并且canvas移动的话是须要从新绘制的，最最重要的一点 是数学要比较好，好比勾股定理啊。。。不懂！！！