VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
  • JavaScript教程之圍繞DOM元素節點的增刪改查

  • 2019-04-17 20:14 來源:未知

HTML 文檔中的所有內容都是節點:

  • 整個文檔是一個文檔節點 document
  • 每個 HTML 元素是元素節點 element
  • HTML 元素內的文本是文本節點 
  • 每個 HTML 屬性是屬性節點
  • 注釋是注釋節點

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

魔兽世界大脚怎么设置游戏路径: 一、增:

魔兽世界wow www.geyjm.icu 增加新元素

如需向 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 對象參考手冊

相關教程