1. 關(guān)于DOM

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

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

2. 動態(tài)改變文檔內(nèi)容

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

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

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

2.1 DOM的節(jié)點

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

DOM 是這樣規(guī)定的：

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

2.1.1 節(jié)點間的關(guān)系

節(jié)點彼此都有等級關(guān)系

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

2.2 DOM標準接口

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

? a. 核心DOM，適用于各種結(jié)構(gòu)化文檔

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

c. XML DOM,專用于XML文檔

3. 核心DOM操作

3.1 訪問節(jié)點

訪問節(jié)點兼容處理

getElement系列方法

使用getElement系列方法來訪問指定的節(jié)點

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

3.1.1 節(jié)點信息1

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

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

3.1.2 節(jié)點信息2

nodeName

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

nodeValue

• 對于文本節(jié)點，nodeValue 屬性包含文本
• 對于屬性節(jié)點，nodeValue 屬性包含屬性值

nodeType

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

3.2 創(chuàng)建和操作節(jié)點

3.2.1 主要方法

方法 說 明

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

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

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

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

3.2.2 操作節(jié)點的屬性

3.3 刪除和替換節(jié)點

方法 說 明

removeChild( node) 刪除指定的節(jié)點(用父級元素去調(diào)用它)

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

3.3.1 removeChild()示例代碼如下

var?tb?=?document.getElementById("tb");//先找到要刪除的節(jié)點，這里要刪除一行var?tr?=?tb.lastChild.lastChild;//這里也需要父節(jié)點操作子節(jié)點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?=?"我的內(nèi)容1";td2.innerHTML?=?"我的內(nèi)容2";tr.appendChild(td1);tr.appendChild(td2);//父節(jié)點操作子節(jié)點//兩個參數(shù)，第一個表示新節(jié)點，第二個表示舊節(jié)點，這里用心節(jié)點替換舊節(jié)點tb.lastChild.replaceChild(tr,tb.lastChild.firstChild);?

3.4 其他

id,value等操作

innerHTML和innerText的區(qū)別

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

元素.style.樣式

className

3.5 示例

代碼1：

結(jié)果1：

代碼2：

結(jié)果2：

代碼3：

結(jié)果3：

4. HTML DOM操作

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

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

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

4.1 table表格對象

類別 名稱 描述

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

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

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

4.2 row行對象

類別 名稱 描述

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

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

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

標簽

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的在dom最前面插入_JavaScript中的DOM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。