一、節(jié)點概述

• 網(wǎng)頁中的所有內(nèi)容都是節(jié)點(標(biāo)簽、屬性、文本、注釋等)，使用node表示。HTML、DOM樹中的所有節(jié)點均可通過JavaScript進行訪問，所有HTML元素(節(jié)點)均可被修改，也可以創(chuàng)建或刪除。
• 利用DOM樹可以把節(jié)點劃分為不同的層級關(guān)系，常見的是父子兄層級關(guān)系。
• 一般地，節(jié)點至少擁有nodeType(節(jié)點類型)、nodeName(節(jié)點名稱)、nodeValue(節(jié)點值)這三個基本屬性。在實際開發(fā)中，節(jié)點操作主要操作的是元素節(jié)點。
  • 元素節(jié)點nodeType為1。
  • 屬性節(jié)點nodeType為2。
  • 文本節(jié)點nodeType為3（文本節(jié)點包含文字、空格、換行等）。

二、獲取父節(jié)點

1.子元素.parentNode

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗的網(wǎng)站設(shè)計師、開發(fā)人員和項目經(jīng)理組成的專業(yè)建站團隊，負責(zé)網(wǎng)站視覺設(shè)計、用戶體驗優(yōu)化、交互設(shè)計和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站設(shè)計、網(wǎng)站制作易于使用并且具有良好的響應(yīng)性。

返回某節(jié)點的父節(jié)點，得到的是離元素最近的父級節(jié)點(即親爸爸)。如果找不到父節(jié)點，就返回為null。

三、獲取子節(jié)點(偽數(shù)組)

1.父節(jié)點.children

返回所有的子元素節(jié)點，只返回子元素節(jié)點，其余節(jié)點不返回。

返回第一個子元素節(jié)點的寫法：父節(jié)點.children[0]

返回最后一個子元素節(jié)點的寫法是：父節(jié)點.children[parentNode.children.length - 1]

四、獲取兄弟節(jié)點

• 獲取下一個兄弟節(jié)點：元素.nextElementSibling
  • 返回當(dāng)前元素的下一個兄弟元素節(jié)點，如果找不到則返回null。
• 獲取上一個兄弟節(jié)點：元素.previousElementSibling
  • 返回當(dāng)前元素的上一個兄弟元素節(jié)點，如果找不到則返回null。

五、創(chuàng)建節(jié)點/添加節(jié)點

• 步驟：先創(chuàng)建節(jié)點再添加節(jié)點。
• 創(chuàng)建節(jié)點語法格式：document.createElement('標(biāo)簽名')
• 添加節(jié)點：
  • 在最后面追加節(jié)點：父元素.appendChild(子元素)
  • 在某個子元素的前面追加節(jié)點：父元素.insertBefore(要插入的元素, 在哪個元素前面)

六、刪除節(jié)點

1.父元素.removeChild(要刪除的元素)

刪除節(jié)點必須通過父元素刪除。

七、復(fù)制節(jié)點

1.元素.cloneNode(布爾值)

• 默認(rèn)是fales，是淺拷貝，即只克隆復(fù)制節(jié)點本身，不克隆里面的子節(jié)點。
• 若為true，是深度拷貝，會復(fù)制節(jié)點本身以及里面所有的子節(jié)點。