JavaScript之DOM
阿新 • • 發佈：2022-05-11
DOM(Document Object Model,文件物件模型)是JavaScript操作HTML文件的重要手段。利用DOM可以獲取和訪問HTML文件的任何元素，還可以動態地在HTML文件中新增或修改元素、屬性及樣式等。
快速入門
利用DOM提供的document物件，可以獲取和訪問HTML文件的任何元素，再根據需要新增、刪除或修改其屬性、內容或樣式等。如下操作：
- 建立、編寫HTML文件
- JS獲取相應DOM元素物件
- 修改相關DOM元素物件內容
關於節點(node)
網頁中所有內容都是節點(標籤, 屬性, 文字, 註釋等)，整個HTML文件就是一個節點樹結構。
節點至少擁有nodeType(節點型別)，nodeName(節點名稱) 和 nodeValue(節點值) 這三個基本屬性。
-
元素節點nodeType 為 1 (標籤) -
屬性節點nodeType 為 2 (屬性) -
文字節點nodeType 為 3 (包括文字, 空格, 換行等)
實際開發操作過程中，我們操作最多的就是元素節點
上圖展示的HTML節點樹中，各節點及它們之間的常見關係如下：
-
根節點：html是整個HTML節點樹的根節點，一個HTML文件僅有一個。 -
子節點：子節點為某個元素節點的下級節點，如head和body為html元素的子節點。 -
父節點：父節點為某個節點的上級節點，如head元素為meta元素和title元素的父節點。 -
兄弟節點：兄弟節點為擁有同一個父節點的節點，如h1元素和div元素為兄弟節點。