資訊專欄INFORMATION COLUMN
摘要：文檔對(duì)象模型是和文檔的編程接口文檔對(duì)象模型將頁(yè)面與到腳本或編程語(yǔ)言連接起來(lái)。通常是指，但將或文檔建模為對(duì)象并不是語(yǔ)言的一部分。文檔對(duì)象模型文檔對(duì)象模型圈起來(lái)的是比較常用的接口。目前接口繼承于接口。
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。
前面我們已經(jīng)基本掌握常規(guī)的語(yǔ)法語(yǔ)義，以及基本的使用方法。接下來(lái)我們講深入進(jìn)去了解其中內(nèi)在的原理。
今天講什么？什么是 DOM ？
DOM 文檔對(duì)象模型
HTML 元素接口
DOM 元素繼承
什么是 DOM ？DOM 通常上來(lái)講，我們可以理解為用 JS 操作 HTML 的 API或者說(shuō) JS 和 HTML 中間的處理器適配器。
文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口DOM 文檔對(duì)象模型
文檔對(duì)象模型 (DOM) 將 web 頁(yè)面與到腳本或編程語(yǔ)言連接起來(lái)。
通常是指 JavaScript，但將 HTML、SVG 或 XML 文檔建模為對(duì)象并不是 JavaScript 語(yǔ)言的一部分。
DOM模型用一個(gè)邏輯樹(shù)來(lái)表示一個(gè)文檔，樹(shù)的每個(gè)分支的終點(diǎn)都是一個(gè)節(jié)點(diǎn)(node)，每個(gè)節(jié)點(diǎn)都包含著對(duì)象(objects)。
DOM的方法(methods)讓你可以用特定方式操作這個(gè)樹(shù)，用這些方法你可以改變文檔的結(jié)構(gòu)、樣式或者內(nèi)容。節(jié)點(diǎn)可以關(guān)聯(lián)上事件處理器，一旦某一事件被觸發(fā)了，那些事件處理器就會(huì)被執(zhí)行。
文檔對(duì)象模型 (DOM) - mdn
圈起來(lái)的是比較常用的接口。
DOM 接口測(cè)試地址
DOM 接口 Attr用來(lái)表示一個(gè) DOM元素的屬性。
大多數(shù)場(chǎng)景你可能會(huì)直接通過(guò)字符串的方式獲取屬性值（Element.getAttribute("name")）。
其實(shí)還有（Element.getAttributeNode()）返回Attr類型。
目前 Attr接口 繼承于 Node接口。DOM4 級(jí)別上會(huì)移出，所以盡量不要使用 Node接口上的屬性
非常通用的基類，所有 Document對(duì)象下的對(duì)象都繼承它。
Element接口繼承 Node接口
Comment 接口代表標(biāo)簽（markup）之間的文本符號(hào)（textual notations）。盡管它通常不會(huì)顯示出來(lái)，但是在查看源碼時(shí)可以看到它們。在 HTML 和 XML 里，注釋（Comments）為 "" 之間的內(nèi)容。在 XML 里，注釋中不能出現(xiàn)字符序列 "--"。
DOM 接口 EventEvent 接口表示在 DOM 中發(fā)生的事件
用戶生成的（例如鼠標(biāo) click 或鍵盤 keydown 事件）
由 API 生成（例如指示動(dòng)畫已經(jīng)完成運(yùn)行的事件，視頻已被暫停等等）
其下還有很多子類
CustomEvent
CustomEvent 事件是由程序創(chuàng)建的，可以有任意自定義功能的事件。
比如說(shuō)我們模擬 click 操作
document.querySelector("button").dispatchEvent(new CustomEvent("click"))
表示選區(qū)中包含的節(jié)點(diǎn)和文本節(jié)點(diǎn)的文檔片段。
用 document.createRange 方法創(chuàng)建
用 Selection對(duì)象的 getRangeAt 方法取得(document.getSelection().getRangeAt(0))。
用構(gòu)造函數(shù) Range() 創(chuàng)建
還是在做一個(gè)聊天框功能的時(shí)候，使用這個(gè)去重置焦點(diǎn)
DOM 接口 DocumentDocument接口表示任何在瀏覽器中已經(jīng)加載好的網(wǎng)頁(yè)，并作為一個(gè)入口去操作網(wǎng)頁(yè)內(nèi)容（也就是DOM tree）。
DOM tree包括像 、 等元素。提供了全局操作 document 的功能。
Document.scrollingElement 返回真實(shí)的滾動(dòng)對(duì)象（用于 PC/M 兼容）
Document.visibilityState 當(dāng)前頁(yè)面狀態(tài)
Document.hidden 當(dāng)前頁(yè)面是否隱藏
Document.documentElement 獲取根元素
其實(shí)功能還有很多，感興趣的可以點(diǎn)標(biāo)題看看
HTML 元素接口針對(duì)具體的 HTML 元素，還有對(duì)應(yīng)的接口，比如 input 會(huì)有對(duì)應(yīng)的 value，required 等屬性
具體繼承方式如下。根據(jù)規(guī)范，不同的類型繼承了不同的屬性。不過(guò)一般來(lái)說(shuō) EventTarget、Node、Element 都繼承了
前端培訓(xùn)-初級(jí)階段（17） - 數(shù)據(jù)存儲(chǔ)（cookie、session、stroage）
前端培訓(xùn)-初級(jí)階段（13） - 正則表達(dá)式
前端培訓(xùn)-初級(jí)階段（13） - 類、模塊、繼承
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （內(nèi)置對(duì)象、函數(shù)）
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （語(yǔ)法、變量、值、類型、運(yùn)算符、語(yǔ)句）
前端培訓(xùn)-初級(jí)階段（13、18）
前端培訓(xùn)-初級(jí)階段（9 -12）
前端培訓(xùn)-初級(jí)階段（5 - 8）
前端培訓(xùn)-初級(jí)階段（1 - 4）
中級(jí)階段文章目錄前端培訓(xùn)-中級(jí)階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
資料前端培訓(xùn)目錄、前端培訓(xùn)規(guī)劃、前端培訓(xùn)計(jì)劃
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104867.html
摘要：文檔對(duì)象模型是和文檔的編程接口文檔對(duì)象模型將頁(yè)面與到腳本或編程語(yǔ)言連接起來(lái)。通常是指，但將或文檔建模為對(duì)象并不是語(yǔ)言的一部分。文檔對(duì)象模型文檔對(duì)象模型圈起來(lái)的是比較常用的接口。目前接口繼承于接口。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平...
摘要：提供了與瀏覽器窗口進(jìn)行交互的對(duì)象標(biāo)簽之間不會(huì)共享。用于描述當(dāng)前瀏覽器的歷史記錄。表示窗口是否以全屏顯示。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。 前面我們已經(jīng)基本掌握常規(guī)的語(yǔ)法語(yǔ)義，以及基...
摘要：提供了與瀏覽器窗口進(jìn)行交互的對(duì)象標(biāo)簽之間不會(huì)共享。用于描述當(dāng)前瀏覽器的歷史記錄。表示窗口是否以全屏顯示。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。 前面我們已經(jīng)基本掌握常規(guī)的語(yǔ)法語(yǔ)義，以及基...
摘要：同源策略是什么同源策略是瀏覽器的一個(gè)安全功能，不同源的數(shù)據(jù)禁止訪問(wèn)。或許你可以說(shuō)驗(yàn)證，在瀏覽器沒(méi)有同源策略的情況下這些都可以繞過(guò)去。總結(jié)同源策略是蠻好的，防御了大部分的攻擊。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思...
閱讀 2899·2021-10-26 09:48
閱讀 1798·2021-09-22 15:22
閱讀 4232·2021-09-22 15:05
閱讀 697·2021-09-06 15:02
閱讀 2666·2019-08-30 15:52
閱讀 2172·2019-08-29 18:38
閱讀 2816·2019-08-28 18:05
閱讀 2380·2019-08-26 13:55
