前端最基礎的就是 HTML+CSS+Javascript
。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS
),本着提升技術水平,打牢基礎知識的中心思想,我們開課啦(每週四)。
前面我們已經基本掌握常規的語法語義,以及基本的使用方法。接下來我們講深入進去了解其中內在的原理。
今天講什麼?
- 什麼是 DOM ?
- DOM 文檔對象模型
- HTML 元素接口
- DOM 元素繼承
什麼是 DOM ?
DOM
通常上來講,我們可以理解爲用 JS 操作 HTML 的 API或者說 JS 和 HTML 中間的處理器適配器。
文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口
文檔對象模型 (DOM) 將 web 頁面與到腳本或編程語言連接起來。
通常是指 JavaScript,但將 HTML、SVG 或 XML 文檔建模爲對象並不是 JavaScript 語言的一部分。
DOM模型用一個邏輯樹來表示一個文檔,樹的每個分支的終點都是一個節點(node),每個節點都包含着對象(objects)。
DOM的方法(methods)讓你可以用特定方式操作這個樹,用這些方法你可以改變文檔的結構、樣式或者內容。節點可以關聯上事件處理器,一旦某一事件被觸發了,那些事件處理器就會被執行。
文檔對象模型 (DOM) - mdn
DOM 文檔對象模型
圈起來的是比較常用的接口。
DOM 接口 Attr
用來表示一個 DOM元素的屬性。
大多數場景你可能會直接通過字符串的方式獲取屬性值(Element.getAttribute('name')
)。
其實還有(Element.getAttributeNode()
)返回Attr類型。
目前 Attr接口 繼承於 Node接口。DOM4 級別上會移出,所以儘量不要使用 Node接口上的屬性
DOM 接口 Element
非常通用的基類,所有 Document
對象下的對象都繼承它。Element
接口繼承 Node
接口
DOM 接口 Comment
Comment
接口代表標籤(markup)之間的文本符號(textual notations)。儘管它通常不會顯示出來,但是在查看源碼時可以看到它們。在 HTML 和 XML 裏,註釋(Comments)爲 '<!--' 和 '-->' 之間的內容。在 XML 裏,註釋中不能出現字符序列 '--'。
DOM 接口 Event
Event 接口表示在 DOM 中發生的事件
- 用戶生成的(例如鼠標
click
或鍵盤keydown
事件) - 由 API 生成(例如指示動畫已經完成運行的事件,視頻已被暫停等等)
-
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 (語法、變量、值、類型、運算符、語句)
- 前端培訓-初級階段(13、18)
- 前端培訓-初級階段(9 -12)
- 前端培訓-初級階段(5 - 8)
- 前端培訓-初級階段(1 - 4)