DOM:
* 概念: Document Object Model 文檔對象模型
* 將標記語言文檔的各個組成部分,封裝爲對象。可以使用這些對象,對標記語言文檔進行CRUD的動態操作
* W3C DOM 標準被分爲 3 個不同的部分:
* 核心 DOM - 針對任何結構化文檔的標準模型
* Document:文檔對象
* Element:元素對象
* Attribute:屬性對象
* Text:文本對象
* Comment:註釋對象
* Node:節點對象,其他5個的父對象
* XML DOM - 針對 XML 文檔的標準模型
* HTML DOM - 針對 HTML 文檔的標準模型
-
核心DOM模型
Document:文檔對象 1. 創建(獲取):在html dom模型中可以使用window對象來獲取 1. window.document 2. document 2. 方法: 1. 獲取Element對象: 1. getElementById() : 根據id屬性值獲取元素對象。id屬性值一般唯一 2. getElementsByTagName():根據元素名稱獲取元素對象們。返回值是一個數組 3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組 4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組 2. 創建其他DOM對象: createAttribute(name) createComment() createElement() createTextNode() 3. 屬性 * Element:元素對象 1. 獲取/創建:通過document來獲取和創建 2. 方法: 1. removeAttribute():刪除屬性 2. setAttribute():設置屬性 * Node:節點對象,其他5個的父對象 * 特點:所有dom對象都可以被認爲是一個節點 * 方法: * CRUD dom樹: * appendChild():向節點的子節點列表的結尾添加新的子節點。 * removeChild() :刪除(並返回)當前節點的指定子節點。 * replaceChild():用新節點替換一個子節點。 * 屬性: * parentNode 返回節點的父節點。
HTML DOM
1. 標籤體的設置和獲取:innerHTML 2. 使用html元素對象的屬性 3. 控制元素樣式 1. 使用元素的style屬性來設置 如: //修改樣式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px"; 2. 提前定義好類選擇器的樣式,通過元素的className屬性來設置其class屬性值。