前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）
前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。html
前面咱們已經基本掌握常規的語法語義，以及基本的使用方法。接下來咱們講深刻進去了解其中內在的原理。前端
今天講什麼？
- 什麼是 DOM ？
- DOM 文檔對象模型
- HTML 元素接口
- DOM 元素繼承
什麼是 DOM ？
DOM 一般上來說，咱們能夠理解爲用 JS 操做 HTML 的 API或者說 JS 和 HTML 中間的處理器適配器。node
文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口
文檔對象模型 (DOM) 將 web 頁面與到腳本或編程語言鏈接起來。
一般是指 JavaScript，但將 HTML、SVG 或 XML 文檔建模爲對象並非 JavaScript 語言的一部分。
DOM模型用一個邏輯樹來表示一個文檔，樹的每一個分支的終點都是一個節點(node)，每一個節點都包含着對象(objects)。
DOM的方法(methods)讓你能夠用特定方式操做這個樹，用這些方法你能夠改變文檔的結構、樣式或者內容。節點能夠關聯上事件處理器，一旦某一事件被觸發了，那些事件處理器就會被執行。
文檔對象模型 (DOM) - mdn
DOM 文檔對象模型
圈起來的是比較經常使用的接口。
web
DOM 接口測試地址正則表達式
DOM 接口 Attr
用來表示一個 DOM元素的屬性。
大多數場景你可能會直接經過字符串的方式獲取屬性值（Element.getAttribute('name')）。
其實還有（Element.getAttributeNode()）返回Attr類型。
目前 Attr接口 繼承於 Node接口。DOM4 級別上會移出，因此儘可能不要使用 Node接口上的屬性
編程
DOM 接口 Element
很是通用的基類，全部 Document對象下的對象都繼承它。Element接口繼承 Node接口segmentfault
DOM 接口 Comment
Comment 接口表明標籤（markup）之間的文本符號（textual notations）。儘管它一般不會顯示出來，可是在查看源碼時能夠看到它們。在 HTML 和 XML 裏，註釋（Comments）爲 '<!--' 和 '-->' 之間的內容。在 XML 裏，註釋中不能出現字符序列 '--'。瀏覽器
DOM 接口 Event
Event 接口表示在 DOM 中發生的事件微信
- 用戶生成的（例如鼠標
click或鍵盤keydown事件） - 由 API 生成（例如指示動畫已經完成運行的事件，視頻已被暫停等等）
其下還有不少子類
cookie
- CustomEvent
CustomEvent事件是由程序建立的，能夠有任意自定義功能的事件。
好比說咱們模擬click操做document.querySelector('button').dispatchEvent(new CustomEvent('click'))
DOM 接口 Range
表示選區中包含的節點和文本節點的文檔片斷。
- 用
document.createRange方法建立 - 用
Selection對象的getRangeAt方法取得(document.getSelection().getRangeAt(0))。
- 用構造函數
Range()建立
仍是在作一個聊天框功能的時候，使用這個去重置焦點
DOM 接口 Document
Document接口表示任何在瀏覽器中已經加載好的網頁，並做爲一個入口去操做網頁內容（也就是DOM tree）。
DOM tree包括像 <body>、<head> 等元素。提供了全局操做 document 的功能。
-
Document.scrollingElement返回真實的滾動對象（用於 PC/M 兼容） -
Document.visibilityState當前頁面狀態 -
Document.hidden當前頁面是否隱藏 -
Document.documentElement獲取根元素
其實功能還有不少，感興趣的能夠點標題看看
HTML 元素接口
針對具體的 HTML 元素，還有對應的接口，好比 input 會有對應的 value，required 等屬性
HTMLVideoElement
DOM 元素繼承
具體繼承方式以下。根據規範，不一樣的類型繼承了不一樣的屬性。不過通常元素都會繼承 EventTarget、Node、Element 
微信公衆號：前端linong
初級階段文章目錄
- 前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
- 前端培訓-初級階段（13） - 正則表達式
- 前端培訓-初級階段（13） - 類、模塊、繼承
- 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
- 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
- 前端培訓-初級階段（1三、18）
- 前端培訓-初級階段（9 -12）
- 前端培訓-初級階段（5 - 8）
- 前端培訓-初級階段（1 - 4）
中級階段文章目錄
資料
- 1. 前端中級階段學習（2）DOM 文檔對象模型
- 2. 前端培訓-中級階段（30）- Promise 對象（2019-12-19期）
- 3. 前端培訓-初級階段（5 - 8）
- 4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
- 5. 前端培訓-中級階段（34）- Vue 生命週期
- 6. 前端培訓-中級階段（19）- 拖拽API（2019-10-03期）
- 7. 前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）
- 8. 前端培訓-中級階段（26）- Canvas 繪圖（2019-11-21期）
- 9. DOM文檔對象模型
- 10. 前端培訓-初級階段（9 -12）
- 更多相關文章...
- • WSDL 文檔 - WSDL 教程
- • XSL-FO 文檔 - XSL-FO 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
- 1. 前端中級階段學習（2）DOM 文檔對象模型
- 2. 前端培訓-中級階段（30）- Promise 對象（2019-12-19期）
- 3. 前端培訓-初級階段（5 - 8）
- 4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
- 5. 前端培訓-中級階段（34）- Vue 生命週期
- 6. 前端培訓-中級階段（19）- 拖拽API（2019-10-03期）
- 7. 前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）
- 8. 前端培訓-中級階段（26）- Canvas 繪圖（2019-11-21期）
- 9. DOM文檔對象模型
- 10. 前端培訓-初級階段（9 -12）