JavaScript學習之DOM（節點、節點層級、節點操作）

目錄
節點
概念
節點的屬性
節點層級
概念
節點操作
建立新節點
增添和刪除節點
複製節點
練習
節點
概念
一個頁面就是一個節點樹，頁面中的內容就是節點。

例如：HTML文件可以看作是一個節點樹，網頁中的所有內容都是節點。

節點的屬性
(1)節點型別(nodeType)

A、1表示為元素節點(即標籤)

B、2表示為屬性節點(標籤的屬性)

C、3表示為文字節點(標籤的內容)，文字節點包括文字、空格、換行等

(2)節點名稱(nodeName)

(3)節點值(nodeValue)

節點層級
概念
一個HTML檔案可以看作是所有元素組成的一個節點樹，各元素節點之間有級別的劃分。

DOM根據HTML中各節點的不同作用，可將其分別劃分為標籤節點（元素節點）、文字節點和屬性節點。

(1)節點之間的層級關係：

節點層級

段落...

父節點：指的是某一個節點的上級節點

子節點：指的是某一個節點的下級節點

兄弟節點：兩個節點同屬於一個父節點(p標籤和a標籤就是兄弟節點)

(2)獲取父節點的方式：
parentNode屬性：來獲得離當前元素的最近的一個父節點

(3)獲取子節點、子元素的方式：

A、childNodes屬性：返回當前節點的所有子節點的集合,返回的節點包括元素、文字和其他節點

B、children屬性：只返回子元素節點的集合(標籤的集合)

C、firstChild屬性：返回第一個子節點(元素節點或文字節點)

D、firstElementChild屬性：返回第一個子元素（第一個子標籤）

E、lastChild屬性：返回最後一個子節點(元素節點或文字節點)

F、lastElementChild屬性：返回最後一個子元素）（最後一個子標籤）

obj.children[0] // 獲取第一個子元素節點
obj.children[obj.children.length - 1] // 獲取最後一個子元素節點
1
2

(4)獲取兄弟節點、兄弟元素的方式

A、nextSibling屬性：返回後一個兄弟節點

B、previousSibling屬性：返回前一個兄弟節點

C、nextElementSibling屬性：返回下一個兄弟元素

D、previousElementSibling屬性：返回前一個兄弟元素

節點操作
建立新節點
(1)透過createElement建立元素節點(建立標籤)；

透過createTextNode建立文字節點

(2)補充：

動態建立元素節點的3種常見方式如下：

document.write()建立元素，如果頁面文件流載入完畢，再呼叫會導致頁面重繪

element.innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪

document.createElement()建立多個元素效率稍微低一點，但是結構更加清晰

增添和刪除節點
appendChild()方法，將一個節點新增到指定父節點的子節點列表末尾

insertBefore(child, 指定元素)方法，將一個節點新增到父節點的指定子節點前面

removeChild(child)用於刪除節點，該方法從DOM中刪除一個子節點，返回刪除的節點

複製節點
cloneNode(deep)
1
注意：
deep是邏輯值，true表示深複製,即複製當前節點及其所有子節點(預設值)

false表示淺複製，只複製當前節點不復制其子節點。

練習

插入節點

輸入文字： 1 2 3 4 5 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

————————————————
作者：星河夢~