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移動的話是須要從新繪製的，最最重要的一點 是數學要比較好，好比勾股定理啊。。。不懂！！！