DOM知識整理

因爲工做中一直在用框架來解決問題，在平時對dom的關注也比較少（特別像angular這種本身封裝了一層視圖層的框架，並不建議直接操做DOM），因此dom相關的知識也忘的差很少了,此次作公司產品的官網，沒有太多的交互和功能，直接用了原生js，正好藉此整理一下遺忘的dom的知識

DOM中定義的一些經常使用接口：

EventTarget

事件接口，規定了事件的屬性和方法，大多數接口都繼承於此接口。

Window

繼承接口：EventTarget/AbstractView

window對象實現了這個接口，表示一個包含DOM文檔的窗口。

Node

繼承接口：EventTarget

節點接口，規定了節點的屬性和方法。

Document

繼承接口：Node

document對象不只實現了Document接口，也實現了HTMLElement接口，用來標識當前窗口內的文檔節點。

Element

繼承接口：Node

描述了全部相同種類的元素所廣泛具備的方法和屬性。

HTMLElement

繼承接口：Element/GlobalEventHandlers

全部html元素都直接或間接實現了HTMLElement接口。

---

因爲要實現一些滾動偏移相關的功能，因此整理了一些相關的屬性：

Window接口相關屬性

• screenX/screenY 瀏覽器窗口距屏幕左側/頂部的距離
• outerHeight/outerWidth 瀏覽器窗口的高/寬
• innerHeight/innerWidth 頁面內容區域的高/寬
• scrollX/scrollY 文檔已水平/垂直滾動的像素數
• pageXOffset/pageYOffset scrollX/scrollY的別稱（瀏覽器兼容性更好些）

Window接口相關方法

• Window.scroll(X,Y) 滾動窗口到文檔中的指定位置（指定一個絕對位置）
• Window.scrollTo() 同scroll(),參數能夠是橫縱座標，也能夠是一個對象{top: y-coord,left: x-coord,behavior:'auto'}//smooth(平滑滾動),instant(瞬間滾動)默認aotu=instant
• window.scrollBy(X,Y) 滾動指定的距離（相對位置）ps:window.scrollBy(0, window.innerHeight)// 滾動一頁
• Window.scrollByLines() 按給定的行數滾動文檔
• window.scrollByPages() 在當前文檔頁面按照指定的頁數翻頁

HTMLElement接口相關屬性

• offsetHeight 元素自身可視高度加上上下border的寬度
• offsetWidth 元素自身可視寬度加上左右border的寬度
• offsetParent 元素的父元素，若是沒有就是body元素
• offsetTop 元素本身border頂部距離父元素頂部或者body元素border頂部的距離
• offsetLeft 元素本身border左邊距離父元素border左邊或者body元素border左邊的距離