成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM知識整理

huayeluoliuhen / 1359人閱讀

摘要：繼承接口對象不僅實現(xiàn)了接口，也實現(xiàn)了接口，用來標(biāo)識當(dāng)前窗口內(nèi)的文檔節(jié)點。繼承接口描述了所有相同種類的元素所普遍具有的方法和屬性。

由于工作中一直在用框架來解決問題，在平時對dom的關(guān)注也比較少（特別像angular這種自己封裝了一層視圖層的框架，并不建議直接操作DOM），所以dom相關(guān)的知識也忘的差不多了,這次做公司產(chǎn)品的官網(wǎng)，沒有太多的交互和功能，直接用了原生js，正好借此整理一下遺忘的dom的知識

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

EventTarget

事件接口，規(guī)定了事件的屬性和方法，大多數(shù)接口都繼承于此接口。

Window

繼承接口：EventTarget/AbstractView

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

Node

繼承接口：EventTarget

節(jié)點接口，規(guī)定了節(jié)點的屬性和方法。

Document

繼承接口：Node

document對象不僅實現(xiàn)了Document接口，也實現(xiàn)了HTMLElement接口，用來標(biāo)識當(dāng)前窗口內(nèi)的文檔節(jié)點。

Element

繼承接口：Node

描述了所有相同種類的元素所普遍具有的方法和屬性。

HTMLElement

繼承接口：Element/GlobalEventHandlers

所有html元素都直接或間接實現(xiàn)了HTMLElement接口。

由于要實現(xiàn)一些滾動偏移相關(guān)的功能，所以整理了一些相關(guān)的屬性：

Window接口相關(guān)屬性

screenX/screenY 瀏覽器窗口距屏幕左側(cè)/頂部的距離

outerHeight/outerWidth 瀏覽器窗口的高/寬

innerHeight/innerWidth 頁面內(nèi)容區(qū)域的高/寬

scrollX/scrollY 文檔已水平/垂直滾動的像素數(shù)

pageXOffset/pageYOffset scrollX/scrollY的別稱（瀏覽器兼容性更好些）

Window接口相關(guān)方法

Window.scroll(X,Y) 滾動窗口到文檔中的指定位置（指定一個絕對位置）

Window.scrollTo() 同scroll(),參數(shù)可以是橫縱坐標(biāo)，也可以是一個對象{top: y-coord,left: x-coord,behavior:"auto"}//smooth(平滑滾動),instant(瞬間滾動)默認(rèn)aotu=instant

window.scrollBy(X,Y) 滾動指定的距離（相對位置）ps:window.scrollBy(0, window.innerHeight)// 滾動一頁

Window.scrollByLines() 按給定的行數(shù)滾動文檔

window.scrollByPages() 在當(dāng)前文檔頁面按照指定的頁數(shù)翻頁

HTMLElement接口相關(guān)屬性

offsetHeight 元素自身可視高度加上上下border的寬度

offsetWidth 元素自身可視寬度加上左右border的寬度

offsetParent 元素的父元素，如果沒有就是body元素

offsetTop 元素自己border頂部距離父元素頂部或者body元素border頂部的距離

offsetLeft 元素自己border左邊距離父元素border左邊或者body元素border左邊的距離

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99684.html

相關(guān)文章

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

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

    xiaochao 評論0 收藏0

  • react知識點整理50問（未完待續(xù)）

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

    wanghui 評論0 收藏0

  • react知識點整理50問（未完待續(xù)）

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

    TIGERB 評論0 收藏0

  • 前端基礎(chǔ)入門

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

    shinezejian 評論0 收藏0

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

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

    Gilbertat 評論0 收藏0

發(fā)表評論

0條評論

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