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

資訊專欄INFORMATION COLUMN

前端培訓(xùn)-中級階段（3） - DOM 文檔對象模型（2019-06-27期）

wums / 3072人閱讀

摘要：文檔對象模型是和文檔的編程接口文檔對象模型將頁面與到腳本或編程語言連接起來。通常是指，但將或文檔建模為對象并不是語言的一部分。文檔對象模型文檔對象模型圈起來的是比較常用的接口。目前接口繼承于接口。

前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我們開課啦（每周四）。

前面我們已經(jīng)基本掌握常規(guī)的語法語義，以及基本的使用方法。接下來我們講深入進(jìn)去了解其中內(nèi)在的原理。

今天講什么？

什么是 DOM ？

DOM 文檔對象模型

HTML 元素接口

DOM 元素繼承

什么是 DOM ？

DOM 通常上來講，我們可以理解為用 JS 操作 HTML 的 API或者說 JS 和 HTML 中間的處理器適配器。

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口
文檔對象模型 (DOM) 將 web 頁面與到腳本或編程語言連接起來。
通常是指  JavaScript，但將 HTML、SVG 或 XML 文檔建模為對象并不是 JavaScript 語言的一部分。
DOM模型用一個邏輯樹來表示一個文檔，樹的每個分支的終點都是一個節(jié)點(node)，每個節(jié)點都包含著對象(objects)。
DOM的方法(methods)讓你可以用特定方式操作這個樹，用這些方法你可以改變文檔的結(jié)構(gòu)、樣式或者內(nèi)容。節(jié)點可以關(guān)聯(lián)上事件處理器，一旦某一事件被觸發(fā)了，那些事件處理器就會被執(zhí)行。
文檔對象模型 (DOM) - mdn
DOM 文檔對象模型

圈起來的是比較常用的接口。

DOM 接口測試地址

DOM 接口 Attr

用來表示一個 DOM元素的屬性。
大多數(shù)場景你可能會直接通過字符串的方式獲取屬性值（Element.getAttribute("name")）。
其實還有（Element.getAttributeNode()）返回Attr類型。
目前 Attr接口 繼承于 Node接口。DOM4 級別上會移出，所以盡量不要使用 Node接口上的屬性

DOM 接口 Element

非常通用的基類，所有 Document對象下的對象都繼承它。
Element接口繼承 Node接口

DOM 接口 Comment

Comment 接口代表標(biāo)簽（markup）之間的文本符號（textual notations）。盡管它通常不會顯示出來，但是在查看源碼時可以看到它們。在 HTML 和 XML 里，注釋（Comments）為 "" 之間的內(nèi)容。在 XML 里，注釋中不能出現(xiàn)字符序列 "--"。

DOM 接口 Event

Event 接口表示在 DOM 中發(fā)生的事件

用戶生成的（例如鼠標(biāo) click 或鍵盤 keydown 事件）

由 API 生成（例如指示動畫已經(jīng)完成運行的事件，視頻已被暫停等等）

其下還有很多子類

CustomEvent
CustomEvent 事件是由程序創(chuàng)建的，可以有任意自定義功能的事件。
比如說我們模擬 click 操作
document.querySelector("button").dispatchEvent(new CustomEvent("click"))

DOM 接口 Range

表示選區(qū)中包含的節(jié)點和文本節(jié)點的文檔片段。

用 document.createRange 方法創(chuàng)建

用 Selection對象的 getRangeAt 方法取得(document.getSelection().getRangeAt(0))。

用構(gòu)造函數(shù) Range() 創(chuàng)建

還是在做一個聊天框功能的時候，使用這個去重置焦點

DOM 接口 Document

Document接口表示任何在瀏覽器中已經(jīng)加載好的網(wǎng)頁，并作為一個入口去操作網(wǎng)頁內(nèi)容（也就是DOM tree）。
DOM tree包括像 、 等元素。提供了全局操作 document 的功能。

Document.scrollingElement 返回真實的滾動對象（用于 PC/M 兼容）

Document.visibilityState 當(dāng)前頁面狀態(tài)

Document.hidden 當(dāng)前頁面是否隱藏

Document.documentElement 獲取根元素

其實功能還有很多，感興趣的可以點標(biāo)題看看

HTML 元素接口

針對具體的 HTML 元素，還有對應(yīng)的接口，比如 input 會有對應(yīng)的 value，required 等屬性

HTMLVideoElement

DOM 元素繼承

具體繼承方式如下。根據(jù)規(guī)范，不同的類型繼承了不同的屬性。不過一般來說 EventTarget、Node、Element 都繼承了

微信公眾號：前端linong

初級階段文章目錄

前端培訓(xùn)-初級階段（17） - 數(shù)據(jù)存儲（cookie、session、stroage）

前端培訓(xùn)-初級階段（13） - 正則表達(dá)式

前端培訓(xùn)-初級階段（13） - 類、模塊、繼承

前端培訓(xùn)-初級階段（13） - ECMAScript （內(nèi)置對象、函數(shù)）

前端培訓(xùn)-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）

前端培訓(xùn)-初級階段（13、18）

前端培訓(xùn)-初級階段（9 -12）

前端培訓(xùn)-初級階段（5 - 8）

前端培訓(xùn)-初級階段（1 - 4）

中級階段文章目錄

前端培訓(xùn)-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）

資料

前端培訓(xùn)目錄、前端培訓(xùn)規(guī)劃、前端培訓(xùn)計劃

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

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

相關(guān)文章

  • 前端培訓(xùn)-中級階段（3） - DOM 文檔對象模型（2019-06-27期）

    摘要：文檔對象模型是和文檔的編程接口文檔對象模型將頁面與到腳本或編程語言連接起來。通常是指，但將或文檔建模為對象并不是語言的一部分。文檔對象模型文檔對象模型圈起來的是比較常用的接口。目前接口繼承于接口。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平...

    張紅新 評論0 收藏0

  • 前端培訓(xùn)-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）

    摘要：提供了與瀏覽器窗口進(jìn)行交互的對象標(biāo)簽之間不會共享。用于描述當(dāng)前瀏覽器的歷史記錄。表示窗口是否以全屏顯示。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我們開課啦（每周四）。 前面我們已經(jīng)基本掌握常規(guī)的語法語義，以及基...

    smallStone 評論0 收藏0

  • 前端培訓(xùn)-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）

    摘要：提供了與瀏覽器窗口進(jìn)行交互的對象標(biāo)簽之間不會共享。用于描述當(dāng)前瀏覽器的歷史記錄。表示窗口是否以全屏顯示。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我們開課啦（每周四）。 前面我們已經(jīng)基本掌握常規(guī)的語法語義，以及基...

    h9911 評論0 收藏0

  • 前端培訓(xùn)-中級階段（10）- 同源策略（2019-08-15期）

    摘要：同源策略是什么同源策略是瀏覽器的一個安全功能，不同源的數(shù)據(jù)禁止訪問?；蛟S你可以說驗證，在瀏覽器沒有同源策略的情況下這些都可以繞過去。總結(jié)同源策略是蠻好的，防御了大部分的攻擊。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思...

    heartFollower 評論0 收藏0

發(fā)表評論

0條評論

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