【瀏覽器】聊聊DOM

歸子莫發表於2021-11-09
瀏覽器

【瀏覽器】聊聊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

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的屬性和方法

HTML DOM Attr 物件

DOM 4 警告！

在 W3C DOM Core 中，Attr (attribute) 物件從 Node 物件繼承所有屬性和方法。

在 DOM 4 中，Attr 物件不再從 Node 繼承。為了保證未來的程式碼安全，應該避免在屬性物件上使用節點物件的屬性和方法。

NamedNodeMap 物件

在 HTML DOM 中，NamedNodeMap 物件表示元素屬性節點的無序集合，NamedNodeMap 中的節點可通過名稱或索引（數字）來訪問。

Text物件

Text 物件代表 HTML 表單中的文字輸入域，該元素可建立一個單行的文字輸入欄位。當使用者編輯顯示的文字並隨後把輸入焦點轉移到其他元素的時候，會觸發 onchange 事件控制程式碼。

Text的屬性和方法

HTML DOM Input Text 物件

Comment物件

Comment是註釋物件，在對HTML編碼時，總會有一些註釋，但是註釋的程式碼，眾所周知，是沒有被執行的。在HTML中，它就存放在Comment物件中。

createComment() 方法可建立註釋節點，一般對這個物件的操作比較的少，也沒啥地址可貼的了。

最後說的話

在寫這篇文章的時候，我一直在思考有沒有必要寫這樣的一篇文章，其實感覺寫這樣的文章很難，儘管大多數是一些標準和協議，但往往就是這些標準和協議難以突破，同時自己也在慢慢積累與沉澱，能沉下心寫，甚至抄點基礎的東西，補足那個圓的一節，感覺會很踏實很多。

本文也是第二次擴寫，從500到1500。有機會，或者再有累計的話再擴寫吧，到時希望在這些標準之上有所突破哈。

感謝

萬能的網路

菜鳥教程、w3school

以及勤勞的自己，個人部落格，GitHub測試，GitHub

公眾號-歸子莫，小程式-小歸部落格

相關文章