【瀏覽器】聊聊DOM
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
說明
作為前端開發，在以前的工作中大多是和DOM打交道，到了現在，大多數前端工程師都是和Vue打交道了。讓Vue去和DOM交流。這並非是諷刺，只是說明這個事實，同時也說明了Vue的強大。
但，想要更深的了解前端，需要打開Vue的保護傘，看看DOM，更甚的是，熟悉DOM。走向底層，同時也走向高層！
沒准下一代“Vue”的開發者不姓尤😆。
什么是DOM？
首先來介紹一下，什么是DOM，這個臭了的問題，還是在這里得以繼續延伸，我很抱歉，但是還是不能去掉這個過程😬。
聽聽W3C的
DOM全程是文檔對象模型（Document Object Model），是一項 W3C (World Wide Web Consortium) 標准。它主要定義了訪問文檔的標准：
W3C 文檔對象模型（DOM）是中立於平台和語言的接口，它允許程序和腳本動態地訪問、更新文檔的內容、結構和樣式。
W3C DOM 標准被分為 3 個不同的部分：
- Core DOM - 所有文檔類型的標准模型
-
Document：文檔對象
-
Element：元素對象
-
Attribute：屬性對象
-
Text：文本對象
-
Comment：注釋對象
-
Node：節點對象，其他5個的父對象
-
- XML DOM - XML 文檔的標准模型
- HTML DOM - HTML 文檔的標准模型
聽聽總結的
DOM就是將標記語言文檔的各個組成部分，封裝為對象。然后開發者（前端切圖仔）就可以使用這些對象，對標記語言文檔進行CRUD的動態操作。
什么是HTML DOM？
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。注意，通過 HTML DOM，JavaScript 能夠訪問和改變 HTML 文檔的所有元素。
HTML DOM 是 HTML 的標准對象模型和編程接口。它定義了：
- 作為對象的 HTML 元素
- 所有 HTML 元素的屬性
- 訪問所有 HTML 元素的方法
- 所有 HTML 元素的事件
換言之：HTML DOM 是關於如何獲取、更改、添加或刪除 HTML 元素的標准。
總結
咱們熟悉的總結又來了☺️，這次不多說，HTML DOM就是一套對HTML元素的CURD，CURD在看各位沒有不熟悉，沒有不興奮的吧。
Document：文檔對象
Document對象的屬性和方法：HTML DOM Document 對象
創建(獲取)
在html dom模型中可以使用window對象來獲取，例如在瀏覽器中輸入document，就會返回一個文檔對象。
window.document
document
Element對象
Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。
獲取Element對象的方法
getElementById()：根據id屬性值獲取元素對象。id屬性值一般唯一
getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組
getElementsByName()：根據name屬性值獲取元素對象們。返回值是一個數組
Element屬性和方法
乍一看實在是太多了，多得我那是根本不想數，但是又不想直接CV在此。
| 屬性 / 方法 | 描述 |
|---|---|
| element.accessKey | 設置或返回元素的快捷鍵。 |
| element.appendChild() | 向元素添加新的子節點，作為最后一個子節點。 |
| element.attributes | 返回元素屬性的 NamedNodeMap。 |
| element.childNodes | 返回元素子節點的 NodeList。 |
| element.className | 設置或返回元素的 class 屬性。 |
給個開頭，再把完全的地址貼出來，HTML DOM Element 對象
Attr對象
在 HTML DOM 中，Attr 對象表示 HTML 屬性，HTML 屬性始終屬於 HTML 元素。
操作方法
removeAttribute()：刪除屬性
setAttribute()：設置屬性
Attr的屬性和方法
DOM 4 警告！
在 W3C DOM Core 中，Attr (attribute) 對象從 Node 對象繼承所有屬性和方法。
在 DOM 4 中，Attr 對象不再從 Node 繼承。為了保證未來的代碼安全，應該避免在屬性對象上使用節點對象的屬性和方法。
NamedNodeMap 對象
在 HTML DOM 中，NamedNodeMap 對象表示元素屬性節點的無序集合，NamedNodeMap 中的節點可通過名稱或索引（數字）來訪問。
Text對象
Text 對象代表 HTML 表單中的文本輸入域，該元素可創建一個單行的文本輸入字段。當用戶編輯顯示的文本並隨后把輸入焦點轉移到其他元素的時候，會觸發 onchange 事件句柄。
Text的屬性和方法
Comment對象
Comment是注釋對象，在對HTML編碼時，總會有一些注釋，但是注釋的代碼，眾所周知，是沒有被執行的。在HTML中，它就存放在Comment對象中。
createComment() 方法可創建注釋節點，一般對這個對象的操作比較的少，也沒啥地址可貼的了。
最后說的話
在寫這篇文章的時候，我一直在思考有沒有必要寫這樣的一篇文章，其實感覺寫這樣的文章很難，盡管大多數是一些標准和協議，但往往就是這些標准和協議難以突破，同時自己也在慢慢積累與沉淀，能沉下心寫，甚至抄點基礎的東西，補足那個圓的一節，感覺會很踏實很多。
本文也是第二次擴寫，從500到1500😌。有機會，或者再有累計的話再擴寫吧，到時希望在這些標准之上有所突破哈。
感謝
萬能的網絡
公眾號-歸子莫，小程序-小歸博客