本文實例講述了JS常見DOM節(jié)點操作。分享給大家供大家參考，具體如下：
DOM含義：DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程的一套API接口，是W3C出臺的推薦標(biāo)準(zhǔn)。其賦予了JS操作節(jié)點的能力。當(dāng)網(wǎng)頁被加載時，瀏覽器就會創(chuàng)建頁面的文檔對象模型。
節(jié)點：根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點：
1、整個文檔時一個文檔節(jié)點。
2、每個HTML元素是元素節(jié)點。
3、HTML元素內(nèi)的文本是文本節(jié)點。
4、每個HTML屬性是屬性節(jié)點。
5、每個注釋是注釋節(jié)點。
所以HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點樹。通過 HTML DOM，節(jié)點樹中的所有節(jié)點都可以通過 JS 進行訪問。所有 HTML 元素（節(jié)點）均可被修改。
一、創(chuàng)建節(jié)點、追加節(jié)點
1、createElement（標(biāo)簽名）創(chuàng)建一個元素節(jié)點（具體的一個元素）。
2、appendChild（節(jié)點）追加一個節(jié)點。
3、createTextNode（節(jié)點文本內(nèi)容）創(chuàng)建一個文本節(jié)點
var oDiv = document.createElement("div");//創(chuàng)建一個div元素，因為是document對象的方法。var oDivText = document.createTextNode("666");//創(chuàng)建一個文本節(jié)點內(nèi)容是“666”，因為是document對象的方法。oDiv.appendChild(oDivText);//父級.appendChild(子節(jié)點);在div元素中添加“666”document.body.appendChild(oDiv);//父級.appendChild(子節(jié)點);;document.body是指向<body>元素document.documentElement.appendChild(createNode);//父級.appendChild(子節(jié)點);;document.documentElement是指向<html>元素二、插入節(jié)點
1、appendChild（節(jié)點）也是一種插入節(jié)點的方式，還可以添加已經(jīng)存在的元素，會將其元素從原來的位置移到新的位置。
2、insertBefore（a,b）是參照節(jié)點，意思是a節(jié)點會插入b節(jié)點的前面。
var oDiv = document.createElement("div");//創(chuàng)建一個div元素，因為是document對象的方法。var oDiv1 = document.getElementById("div1");document.body.insertBefore(oDiv,oDiv1);//在oDiv1節(jié)點前插入新創(chuàng)建的元素節(jié)點ul.appendChild(ul.firstChild); //把ul的第一個元素節(jié)點移到ul子節(jié)點的末尾三、刪除、移除節(jié)點
1、removeChild(節(jié)點) 刪除一個節(jié)點，用于移除刪除一個參數(shù)（節(jié)點）。其返回的被移除的節(jié)點，被移除的節(jié)點仍在文檔中，只是文檔中已沒有其位置了。
var removeChild = document.body.removeChild(div1);//移除document對象的方法div1
四、替換節(jié)點
1、replaceChild(插入的節(jié)點，被替換的節(jié)點) ，用于替換節(jié)點，接受兩個參數(shù)，第一參數(shù)是要插入的節(jié)點，第二個是要被替換的節(jié)點。返回的是被替換的節(jié)點。
新聞熱點
疑難解答
圖片精選
