JS經常使用操做節點的方法

時間 2019-12-11

標籤經常使用節點方法欄目 JavaScript 简体版

原文原文鏈接

js常見的建立dom節點的方法有html

createElement() 建立一個元素節點 => 接收參數爲string類型的nodenamenode

createTextNode() 建立一個文本節點 => 接收參數爲string類型的text內容瀏覽器

createAttribute() 建立一個屬性節點 => 接收參數爲string類型的屬性名稱app

createComment() 建立一個註釋節點 => 接收參數爲string類型的註釋文本dom

1、建立DOM節點
使用的命令是優化

var oDiv = document.createElement('div');url

這樣就建立了一個div標籤。spa

2、插入DOM節點code

移動DOM節點也就是把這個節點插入到html文檔中的某個地方，這裏js給了咱們兩個方法：htm

1.appendChild()：把節點插入到父節點的末尾。

document.body.appendChild(oDiv); //把div插入到body中，而且位於末尾

2.insertBefore()：把節點插入到父節點的某個兄弟節點的前面。

var oP = createElement('p'); //建立一個p節點
document.body.insertBefore(oP,oDiv); //把p節點插入到div的前面

三.刪除DOM節點

刪除DOM節點的方法是removeChild()。

document.body.removeChild(oP); //刪除p節點

四.查找DOM節點

查找DOM節點的方法不少，經常使用的有：

getElementById() //經過元素Id，惟一性

如html文檔以下：

這是可使用getElementById()獲取到id爲box的div。

var oDiv = document.getElementById('box');

2.getElementsByTagName() //經過元素的標籤名來選擇元素

var aDiv = getElementsByTagName('div');
要注意的是，getElementsByTagName()獲取的是一組元素，因此若是想取得上面那個id爲box的div要在後面加上[0];

var oDiv = getElementsByTagName('div')[0];

5、替換DOM節點

替換DOM節點的方法是replaceChild()。

var oSpan = document.createElement('span'); //建立一個span標籤
document.body.replaceChild(oSpan,oBox); //用span標籤替換div標籤
最經常使用的DOM操做就是這些了，其餘還有不少的方法，就目前而言，各瀏覽器兼容性不太好，因此仍是推薦你們暫時只使用上述這些方法。

DocumentFragment節點不屬於文檔樹，繼承的parentNode屬性老是null。它有一個很實用的特色，當請求把一個DocumentFragment節點插入文檔樹時，插入的不是DocumentFragment自身，而是它的全部子孫節點。這個特性使得DocumentFragment成了佔位符，暫時存放那些一次插入文檔的節點。它還有利於實現文檔的剪切、複製和粘貼操做。
另外，當須要添加多個dom元素時，若是先將這些元素添加到DocumentFragment中，再統一將DocumentFragment添加到頁面，會減小頁面渲染dom的次數，效率會明顯提高。