圍繞DOM元素節點的增刪改查

心晴安夏發表於2018-06-05

HTML 文件中的所有內容都是節點：

  • 整個文件是一個文件節點 document
  • 每個 HTML 元素是元素節點 element
  • HTML 元素內的文字是文字節點
  • 每個 HTML 屬性是屬性節點
  • 註釋是註釋節點

圍繞DOM節點的操作可以概括為四種：增、刪、改、查

一、增：

增加新元素

如需向 HTML DOM 新增新元素，您首先必須建立該元素，然後把它追加到已有的元素上。

document.createElement(“標籤名”);  建立元素節點  並返回該元素  但此時  並沒有新增到文件中

 parent.appendChild(newChild) 方法，將新元素作為父元素的最後一個子元素進行新增 若將要插入的節點 在文件中已經存在  則相當於剪下功能

或

parentNode.insertBefore（a,b）在指定的子節點前面插入新的子節點。  在b之前插入a，a b 都是parentNode的子元素

除此之外也可以：

document.createTextNode(“文字內容”);  建立文字節點

document.createComment();  建立註釋節點

document.createDocumentFragment();  建立文件片段

二、刪：

parentNode.removeChild(子節點);  刪除被選節點的子節點    返回的為被刪除的節點  相當於剪下

Node.remove()刪除被選節點的所有內容，返回null，相當於移除

三、改：

（1）改變元素

  替換 HTML DOM 中的子節點 replaceChild()

parent.replaceChild(newNode,originNode); 用newNode替換到parent中的originNode

改變元素內容
element.innerHTML="新內容";

（2）改變屬性

  setAttribute(“prop”,”value”)把指定屬性設定或修改為指定的值。

（3）改變樣式

 element.style.prop=”newValue”;

（4）改變事件

 element.onxxx=function(){

//函式體

}

xxx為事件型別 如：click、dbclick、mouseup等

四、 查：

element.innerHTML 會返回元素的內容

element.style.prop 會返回元素的樣式 ，注意只能獲得設定在行間的樣式

window.getComputedStyle(element,null).prop 會返回元素的樣式 ，注意只能獲得設定在行間的樣式,且該方法為只讀的，IE9以下不相容

elementNode.getAttribute(“屬性名”);

查詢DOM節點的方法，點這裡

注意一點：DOM 根節點

有兩個特殊的屬性，可以訪問全部文件：

  • document.documentElement – 全部文件
  • document.body – 文件的主體

HTML DOM 物件參考手冊

相關文章