JavaScript HTML DOM 元素

在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

節點類型：元素 1 ，屬性 2 ，文本 3 ，注釋 8，文檔 9。

一、添加和刪除節點（HTML 元素）

1、創建節點

1）創建該元素（元素節點）；

2）向一個已存在的元素追加該元素。

語法：appendChild(newnode)

eg:

1

5
6

document.createElement("標籤名"); // 創建元素節點

document.createTextNode("文本"); //創建文本節點

appendChild; //方法向節點添加最後一個子節點。也可以使用 appendChild 方法從一個元素向另一個元素中移動元素。 用法：a.appendChild(b)，把b添加到a內。

2.添加節點

appendChild; //在指定節點的最後一個子節點列表之後添加一個新的子節點。

語法，eg:同上。

insertBefore; //insertBefore 方法可在已有的子節點前插入一個新的子節點。

語法：insertBefore(newnode,node);

eg:

1

2
• JavaScript

3

• HTML

4

5
6

3.刪除節點

removeChild //removeChild 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。

語法：nodeObject.removeChild(node)

eg:

1

5
6

DOM 需要清楚需要刪除的元素，以及它的父元素。先找到希望刪除的子元素，然後使用其 parentNode 屬性來找到父元素。

4.替換節點

replaceChild //把一個給定父元素裡面的一個子節點替換為另一個子節點。

語法：referencre = element.replaceChild(newChild,oldChild); //newChild: 必需，用於替換 oldChild的對象。 oldChild: 必需，被 newChild替換的對象。

eg:

1

3 將加粗改為斜體
4
5

注意：當 oldnew 被替換時，所有與之相關的屬性內容都將被移除。 newChild必須先被建立。

5.訪問子節點

childNodes //訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。

語法：elementNode.childNodes //可用childNodes[i]數組的形式表示第幾個子元素

eg:

1

7

6.訪問子節點的第一和最後項

firstChild //返回『childNodes』數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：node.firstChild //與elementNode.childNodes[0]是同樣的效果。

lastChild //返回『childNodes』數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：node.lastChild //與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

eg：

1

6

7.訪問父節點

parentNode //獲取指定節點的父節點

語法：elementNode.parentNode

eg:

1

4

注意: 父節點只有一個，瀏覽器兼容問題，chrome、firefox等瀏覽器標籤之間的空白也算是一個文本節點。

8.訪問兄弟節點

nextSibling //可返回某個節點之後緊跟的節點（處於同一樹層級中）。

語法：nodeObject.nextSibling

previousSibling //可返回某個節點之前緊跟的節點（處於同一樹層級中）。

語法：nodeObject.previousSibling

eg:

1

2
• Coffee

3

• Tea

4

5

點擊按鈕來獲得首個項目的下一個同胞。

6 試一下
7

注意: 如果無此節點，則該屬性返回 null。兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:判斷節點nodeType是否為1, 如是為元素節點，跳過。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！