節點操作

DOM節點

DOM節點：DOM樹里每一個內容都稱之為節點

節點類型：

• 元素節點
  • 所有的標簽 比如body、div
  • html時跟節點
• 屬性節點
  • 所有的屬性，比如href
• 文本節點
  • 所有的文本
• 其他

查找節點

節點的關系：針對的找親戚返回的都是對象

• 父節點
• 子節點
• 兄弟節點

父節點查找

• parentNode 屬性：返回最近一級的父節點，找不到返回null

//返回父元素的DOM對象
子元素.parentNode

子節點查找

• childNodes

  • 獲得所有子節點、包括文本節點（空格、換行）、注釋節點等

    父元素.childNodes
    

• children 屬性（重點）

  • 僅獲得所有元素節點

  • 返回的還是一個偽數組

    父元素.children
    

兄弟節點查找

• 下一個兄弟節點

  • nextElementSibiling 屬性

    元素.nextElementSibiling
    

• 上一個兄弟節點

  • previousElementSibling 屬性

    元素.previousElementSibling
    

增加節點

很多情況下，我們需要在頁面中增加元素。比如點擊發布按鈕，可以新增一條信息，一般情況下，我們新增節點按照如下操作

1. 創建一個新的節點
2. 把創建的節點放入到指定的元素內部

創建節點

即創造出一個新的網頁元素，在添加到網頁內，一般先創建節點，然后插入節點

創建元素節點的方法：

document.creatElement('標簽名');
const newTag = document.creatElement('標簽名');

追加節點

想要在界面看到，還需要擦汗如到某個父元素中

插入到父元素的最后一個子元素：

父元素.appendChild(要插入的元素)；

插入到父元素中某個子元素的前面：

父元素.insertBefore(要插入的元素，在哪個元素前面)；

克隆節點

復制一個原有的節點，把復制的節點放入到指定的元素內部

語法：

元素.cloneNode(布爾值)；
//true：克隆是會包含后代節點一起克隆	深克隆
//false：克隆時不會包含后代節點（默認值）	淺克隆

刪除節點

若一個節點在頁面中已經不需要時，可以刪除他，刪除節點必須通過父元素刪除

語法：

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

注意：

• 如果不存在父子關系則刪除不成功
• 刪除節點和隱藏節點（display：none）有區別
  • 隱藏節點：節點還是存在的
  • 刪除節點：從html中刪除

如果不存在父子關系則刪除不成功

• 刪除節點和隱藏節點（display：none）有區別
  • 隱藏節點：節點還是存在的
  • 刪除節點：從html中刪除