1. 程式人生 > >JS DOM 框架內容

JS DOM 框架內容

DOM (Document Object Model) ,即為文件物件模型,是 HTML 和 XML 文件的應用程式介面(API)。

  • HTML DOM 定義了訪問和操作 HTML 文件的標準方法,提供了文件中獨立元素的結構化和麵向物件的表示方法,並允許通過物件的屬性和方法訪問這些物件,或者通過DOM物件去修改元素的內容以及屬性的數值,從而建立動態的文件內容。

DOM 以樹結構表達 HTML 文件:當網頁被載入時,瀏覽器會建立頁面的DOM。它把 HTML 文件呈現為帶有元素、屬性和文字的樹結構(節點樹),因此在 HTML DOM 中,所有事物都是節點(DOM 是被視為節點樹的 HTML)。
節點樹-樹形結構


DOM 的分層結構

  • 整個文件是一個文件節點
  • 每個 HTML 元素(標籤)是元素節點,因此又叫做標籤節點
  • HTML 元素標籤節點內(包含在標籤節點內)的文字是文字節點
  • 每個 HTML 屬性是屬性節點
  • 註釋屬於註釋節點。
  • 節點樹的層級關係,父(parent)、子(child)、兄弟同級(sibling)節點。
  • 在節點樹中,頂端節點被稱為根(root),每個節點都有父節點、除了根(它沒有父節點),一個節點可擁有任意數量的子節點,同級節點是擁有相同父節點的節點。

DOM的程式語言

  • 可通過 JavaScript (以及其他程式語言)對 HTML DOM 進行訪問。

DOM的程式設計物件

  • 所有 HTML 元素被定義為物件,而程式設計介面則是物件方法物件屬性

DOM的程式設計介面

  • 程式設計介面(方法):是能夠執行的動作(比如新增或修改元素)。
  • 標稱介面(屬性):是能夠獲取或設定的值(比如節點的名稱或內容)。