JavaScript-DOM

概念

Document Object Model 文件物件模型

• 將標記語言文件的各個組成部分，封裝成物件。可以使用這些物件，對標記語言文件進行CRUD的動態操作

組成

W3C DOM標準被分為三個不同的組成部分：

• 核心 DOM - 針對任何結構化文件的標準模型

  • Document：文件物件

  • Element：元素物件

  • Attribute：屬性

  • Text：文字物件

  • Comment：註釋物件

  • Node：節點物件，其他5個的父物件

• XML DOM - 針對XML文件的標準模型

• HTML DOM - 針對HTML文件的標準模型

核心DOM模型

Document：文件物件

1、建立（獲取）

• window.document

• document

2、方法

• 獲取Element物件
  • getElementById() 根據id屬性值獲取元素物件，id屬性值一般唯一
  • getElementsByTagName() 根據元素名稱（即標籤名稱）來獲取元素物件們，返回值是一個數組
  • getElementsByClassName() 根據Class的屬性值來獲取元素物件們，返回值是一個數組
  • getElementsByName() 根據name屬性值來獲取元素物件們，返回值是一個數組
• 建立其他DOM物件
  • createAttribute(name)
  • createComment()
  • createElement()
  • createTextNode()

Element：元素物件

1、建立（獲取）

• window.Element
• Element

2、方法

• removeAttribute() 刪除屬性
• setAttribute() 設定屬性

Node：節點物件，其他5個的父物件

1、特點：所有dom物件都可以認為是一個節點

2、方法：

• CRUD dom樹
  • appendChild() 向節點的子節點列表的結尾新增新的子節點
  • removeChild() 刪除並返回當前節點的指定子節點
  • replaceChild() 用新節點替換一個子節點

3、屬性

• parentNode 返回當前節點的父節點

HTML DOM

• 標籤體的設定和獲取：innerHTML

• 使用html元素物件的屬性

• 控制元素樣式

  • 使用元素的style屬性來設定

    • div.style.width = "200px"
      

  • 提前定義好類選擇器的樣式，通過元素的className屬性來設定其class屬性值