DOM

文章目錄

• DOM
• DOM簡介
• DOM樹和DOM結點
• 訪問DOM結點

DOM簡介

DOM：文件物件模型

​ -對文件的結構化表述

​ -定義了在程式中對該結構進行訪問的方式

DOM 分類：

• 核心DOM：用於任何結構化的表述

  ​ 與程式語言無關 DOM是一種API

• HTML DOM：用於HTML文件的標準模型

• XML DOM：用於XML文件的標準模型

DOM的作用：

• 訪問文件內容，包括元素、屬性、文字
• 增加文件內容，包括元素、屬性、文字
• 刪除文件內容，包括元素、屬性、文字
• 訪問文件內容，包括元素、屬性、文字

DOM樹和DOM結點

DOM 將 HTML 文件抽象為樹形結構，稱這棵樹為 DOM 樹。
HTML 中的每一項內容都可以在 DOM 樹中找到，對文件內容的操作即對 DOM 樹的操作

HTML 文件中的所有內容都是節點：

• ① 整個文件是一個文件節點 ；
• ② 每個 HTML 元素是**元素節點 **；
  • HTML 開始標籤中的屬性為元素節點物件的屬性
  • HTML 開始標籤中的事件屬性為元素節點物件的方法
  • 元素節點物件中的方法函式中的 this 指向當前觸發事件的元素
• ③ HTML 元素內的文字是**文字節點 **；
  • 空格、換行空格屬於文字節點
• ④ 每個 HTML 屬性是**屬性節點 **；
• ⑤ 註釋是註釋節點 ；

在結點樹中，頂端結點被稱為根

父節點 子節點 同胞結點(左為兄)

訪問DOM結點

如何獲得結點：

• 直接獲取結點

  • 通過id屬性獲得結點

    document.getElementById() ID選擇器
    

  • 通過標籤名獲得所有同名標籤

    document.getElementsByTagName() 標籤選擇器
    

  • 通過類名獲得所有類名相同的標籤

    document.getElementsByClassName() 類選擇器
    

• 通過結點關係獲取

  • 通過父節點獲得子節點
  • 通過子節點獲得父節點
  • 獲得前後兄弟節點

元素樹:

僅僅包含元素節點的樹結構，不是一顆新樹，只是節點樹的子集

innerHTML屬性：

​ – innerHTML 是 DOM 中元素節點的屬性，相當於一個容器

​ – 用於獲取或改變任意元素節點的內容，該屬性可讀可寫

​ – 操作簡單，幾乎所有瀏覽器均支援

元素節點修改：

/*文件元素修改*/
document.getElementsByClassName("three")[0].nextElementSibling.innerHTML="獼猴桃"
/*背景顏色修改*/
document.getElementsByClassName("three")[0].style.background="blue"
document.getElementsByClassName("three")[0].setAttribute("style","background:yellow")