1. 關于DOM

文檔對象模型(DocumentObject Model)，是基于瀏覽器編程的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla(火狐)的瀏覽器最與標準接近。

通過 DOM，可以訪問所有的 HTML元素，連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除，同時也可以創建新的元素。

2. 動態改變文檔內容

要想對頁面的內容做修改，需要如下方式來操作：

? a.解析文檔(如HTML)并生成DOM樹

? b.通過DOM提供的屬性和方法，獲取或改變文檔的內容

2.1 DOM的節點

HTML 文檔中的每個成分都是一個節點(Node)

DOM 是這樣規定的：

• 整個文檔是一個文檔節點
• 每個 HTML 標簽是一個元素節點
• 包含在 HTML 元素中的文本是文本節點
• 每一個 HTML 屬性是一個屬性節點
• 注釋屬于注釋節點

2.1.1 節點間的關系

節點彼此都有等級關系

父節點、子節點、兄弟節點(同級節點)

2.2 DOM標準接口

W3C提供了三類DOM標準接口,如下：

? a. 核心DOM，適用于各種結構化文檔

? b.HTML DOM,專用于HTML文檔

c. XML DOM,專用于XML文檔

3. 核心DOM操作

3.1 訪問節點

訪問節點兼容處理

getElement系列方法

使用getElement系列方法來訪問指定的節點

• getElementById():返回對擁有指定id的第一個對象的引用
• getElementsByTagName():返回帶有指定名稱的對象集合
• getElementsByClassName()：返回指定的類選擇器的集合
• getElementsByName():返回帶有指定名稱的對象集合(注意不是所有標簽都有name屬性)

3.1.1 節點信息1

每個節點都擁有包含節點某些信息的屬性

• nodeName(節點名稱)
• nodeValue(節點值)
• nodeType(節點類型)

3.1.2 節點信息2

nodeName

• 元素節點的 nodeName (節點名稱)是標簽名稱
• 屬性節點的 nodeName 是屬性名稱
• 文本節點的 nodeName 永遠是 #text
• 文檔節點的 nodeName 永遠是 #document

nodeValue

• 對于文本節點，nodeValue 屬性包含文本
• 對于屬性節點，nodeValue 屬性包含屬性值

nodeType

• 元素 1 、屬性 2、 文本 3、 注釋 8、 文檔 9
• 上面不同的數值代表不同的節點類型

3.2 創建和操作節點

3.2.1 主要方法

方法 說 明

createElement( tagName) 創建一個名為tagName的新元素節點,用法Document.createElement(標簽名)

ANode.appendChild( BNode) 把子節點B追加到父節點A里面的末尾

insertBefore( ANode,BNode ) 把A節點插入到B節點之前

Node.loneNode(deep) deep為true則復制該節點以及該節點的所有子節點，為false則只復制該節點和其屬性

3.2.2 操作節點的屬性

3.3 刪除和替換節點

方法 說 明

removeChild( node) 刪除指定的節點(用父級元素去調用它)

replaceChild( newNode, oldNode) 用newNode來替換oldNode(https://www.cnblogs.com/zzq919101/p/6017152.html)

3.3.1 removeChild()示例代碼如下

var?tb?=?document.getElementById("tb");//先找到要刪除的節點，這里要刪除一行var?tr?=?tb.lastChild.lastChild;//這里也需要父節點操作子節點tr.parentNode.removeChild(tr);??

3.3.2 replaceChild()示例代碼

var?tb?=?document.getElementById("tb");var?tr?=?document.createElement("tr");var?td1?=?document.createElement("td");var?td2?=?document.createElement("td");td1.innerHTML?=?"我的內容1";td2.innerHTML?=?"我的內容2";tr.appendChild(td1);tr.appendChild(td2);//父節點操作子節點//兩個參數，第一個表示新節點，第二個表示舊節點，這里用心節點替換舊節點tb.lastChild.replaceChild(tr,tb.lastChild.firstChild);?

3.4 其他

id,value等操作

innerHTML和innerText的區別

• 如果內容中有html標簽，使用innerHTML時，內容中的html標簽會被解析出來，而使用innerText時，html只會被當作文本顯示出來

元素.style.樣式

className

3.5 示例

代碼1：

結果1：

代碼2：

結果2：

代碼3：

結果3：

4. HTML DOM操作

? HTML文檔中的每個節點，都是DOM對象,每個DOM對象都有屬于自己的屬性和方法.

? HTML DOM在操作表格時，我們把一個表格看成是一個table對象，那么一個table對象是由若干個行對象(row)組成的，而其中每個行對象又是由若干個單元格對象(cell)組成的

? Table對象可以操作行對象，行對象可以操作單元格對象

4.1 table表格對象

類別 名稱 描述

屬性 rows[] 返回包含表格中所有行的一個數組

方法 insertRow() 在表格中插入一個新行

方法 deleteRow() 從表格中刪除一行

4.2 row行對象

類別 名稱 描述

屬性 cells[] 返回包含行中所有單元格的一個數組

屬性 rowIndex 返回該行在表中的位置

方法 insertCell() 在一行中的指定位置插入一個空的

標簽

方法 deleteCell() 刪除行中指定的單元格

另，對于單元格對象，還有cellIndex可以獲取單元格的索引號

例如,這里需要在表格的末尾追加一行：

var?tb?=?document.getElementById("tb");//添加之前，tb中共有多少個tr,返回的是一個數組var?alltrs?=?tb.lastChild.rows;//先在tb中添加一行，此時行雖然添加了，但行中沒有任何內容//此時傳遞的參數了，是一個添加的位置，是tr的索引號,這里是在末尾追加var?newtr?=?tb.insertRow(alltrs.length);//再在新添加的行中，添加單元格對象var?td1?=?newtr.insertCell(0);var?td2?=?newtr.insertCell(1);//然后還需要往td中添加內容td1.innerHTML?=?"html?dom";td2.innerHTML?=?"測試";?