DOM -- 知識總結 · 前端知識 -- 學習整理

>[success] # 認識DOM 1. window的全局對象中除了JavaScript語法部分的Object、Array、Date等，還有**DOM文檔對象模型**（Document Object Model），表示**頁面所有的內容表示為可以修改的對象** 例如 * JavaScript 能改變頁面中的所有 HTML 元素 * JavaScript 能改變頁面中的所有 HTML 屬性 * JavaScript 能改變頁面中的所有 CSS 樣式 * JavaScript 能刪除已有的 HTML 元素和屬性 * JavaScript 能添加新的 HTML 元素和屬性 * JavaScript 能對頁面中所有已有的 HTML 事件作出反應 * JavaScript 能在頁面中創建新的 HTML 事件 2. 為了可以通過**JavaScript**來進行**訪問頁面上元素進行操作**，**瀏覽器將我們編寫在HTML中的每一個元素**（Element）都**抽象成了一個個對象**，舉個例子 2.1. **document.documentElement** -- 對應的是html元素 2.2. **document.body** -- 對應的是body元素； 2.3. **document.head** -- 對應的是head元素 3. DOM是個縮寫，全稱是Document Object Model，被譯為文檔對象模型。 * **D表示Document**，就是DOM將HTML頁面解析為一個文檔。同時提供了document對象。 * **O表示Object**，就是DOM將HTML頁面中每個元素解析為一個對象。 * **M表示Model**，就是DOM中表示各個對象之間的關系。 >[info] ## DOM的作用 **DOM被設計用于解析HTML頁面文檔，方便JavaScript語言通過DOM訪問和操作HTML頁面中的內容。** **DOM是由W3C組織定義標準規范，并且由各大瀏覽器廠商支持。嚴格意義上來講，DOM并非屬于** **JavaScript語言。** **我們之所以可以在JavaScript語言中使用DOM，是因為各大測覽器將DOM的標準規范內容封裝成了** **JavaScript語言所支持的形式。** **對DOM中的對象，我們只有調用的權限，沒有修改的權限，也說明了這個問題。** > **瀏覽器加載并運行HTML頁面后，會創建DOM結構。由于DOM中的內容被封裝成了JavaScript語言中的對象，所以我們可以使用JavaScript語言通過DOM結構來訪問和操作HTML頁面中的內容。** >[info] ## DOM Tree 在html結構中，最終會形成一個**樹結構**,因此在抽象成DOM對象的時候，它們也會形成一個樹結構，我們稱之為**DOM Tree** ![](https://img.kancloud.cn/c2/85/c285bd914e2499dfb848ca7aec562a1f_486x266.png) >[info] ## DOM 對象關系通過瀏覽器提供給我們的**DOM API**，我們可以對元素以及其中的內容做任何事情,**類型之間有如下的繼承關系** ![](https://img.kancloud.cn/59/05/59059b1001881b649deb6a77ce768c1b_1450x609.png) **Node是節點**，其中包含**不同類型的節點**，比如說**文本節點，注釋節點** **Element只是Node節點的一種**除此之外還包括了 Document/Comment 之類的節點 **Element繼承與Node**，可以調用Node的方法,不僅Element節點剛才其他節點也是一樣 * 節點類型可以通過`nodeType` 來查看當前節點類型 [類型可以查看MDN文檔](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType) >[danger] ##### Node 節點之間的導航如果我們獲取到一個節點（Node）后，**可以根據這個節點去獲取其他的節點，我們稱之為節點之間的導航** ![](https://img.kancloud.cn/27/a2/27a24fbffa097d1ef6b299d8cd75d218_588x279.png) ~~~ 父節點：parentNode 前兄弟節點：previousSibling 后兄弟節點：nextSibling 子節點：childNodes 第一個子節點：firstChild 第二個子節點：lastChild ~~~ * 舉個例子 ~~~ <body>  <div class="main">123</div> </body> ~~~ * js 獲取 ~~~ const body = document.body // 獲取對應的是body元素 body.childNodes // 獲取body元素中所有節點 ~~~ ![](https://img.kancloud.cn/b5/7a/b57aa3757fcc69a3d9fbad629d8ea10d_842x573.png) >[danger] ##### 元素（Element）節點之間的導航如果我們獲取到一個元素（Element）后，**可以根據這個元素去獲取其他的元素，我們稱之為元素之間的導航** ![](https://img.kancloud.cn/8c/d0/8cd055daceff5d0ebd04de38919f3c79_621x327.png) ~~~ 父元素：parentElement 前兄弟節點：previousElementSibling 后兄弟節點：nextElementSibling 子節點：children 第一個子節點：firstElementChild 第二個子節點：lastElementChild ~~~ * 舉個例子 ~~~ <body>  <div class="main">123</div> <script type="text/javascript"></script > </body> ~~~ * js 獲取 ~~~ const body = document.body // 獲取對應的是body元素 body.children// 獲取body元素中所有元素節點 ~~~ * 此時獲取只有元素節點沒有類似注釋節點等其他節點 ![](https://img.kancloud.cn/c5/3a/c53a7072eb56c857e3e544279fa5c865_473x135.png)