国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM知識整理

huayeluoliuhen / 1352人閱讀

摘要：繼承接口對象不僅實現了接口，也實現了接口，用來標識當前窗口內的文檔節點。繼承接口描述了所有相同種類的元素所普遍具有的方法和屬性。

由于工作中一直在用框架來解決問題，在平時對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左邊的距離

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99684.html

相關文章

  • HTML DOM 知識點整理（一）—— Document對象

    摘要：提示對象是對象的一部分，可通過屬性對其進行訪問。方法返回布爾值，用于檢測文檔或文檔內的任一元素是否獲取焦點。布爾值，指定事件是否在捕獲或冒泡階段執行。向元素添加事件句柄移除元素的事件句柄方法級元素參數類型描述對象必須。一、DOM對象 DOM對象整體包括： HTML DOM Document對象 HTML DOM 元素對象 HTML DOM 屬性對象 HTML DOM 事件對象 HTML D...

    xiaochao 評論0 收藏0

  • react知識點整理50問（未完待續）

    react知識點50問 1.react中的keys的作用 keys是react來追蹤哪些元素被修改添加、刪除的輔助標記 2.調用setState之后發生了什么 react會將傳入的參數對象和組件的當前狀態合并，根據新的狀態構建新的react元素樹，計算react新樹和老樹的差異，根據差異最小化對界面進行最小化渲染 3.react生命周期 初始化階段：getDeaultProps（獲取實例的默認p...

    wanghui 評論0 收藏0

  • react知識點整理50問（未完待續）

    react知識點50問 1.react中的keys的作用 keys是react來追蹤哪些元素被修改添加、刪除的輔助標記 2.調用setState之后發生了什么 react會將傳入的參數對象和組件的當前狀態合并，根據新的狀態構建新的react元素樹，計算react新樹和老樹的差異，根據差異最小化對界面進行最小化渲染 3.react生命周期 初始化階段：getDeaultProps（獲取實例的默認p...

    TIGERB 評論0 收藏0

  • 前端基礎入門

    摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發了，真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能，不需要依賴 flash。...

    shinezejian 評論0 收藏0

  • 深入React知識點整理（一）

    摘要：以我自己的理解，函數式編程就是以函數為中心，將大段過程拆成一個個函數，組合嵌套使用。越來越多的跡象表明，函數式編程已經不再是學術界的最愛，開始大踏步地在業界投入實用。也許繼面向對象編程之后，函數式編程會成為下一個編程的主流范式。 使用React也滿一年了，從剛剛會使用到逐漸探究其底層實現，以便學習幾招奇技淫巧從而在自己的代碼中使用，寫出高效的代碼。下面整理一些知識點，算是React看書...

    Gilbertat 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<