今天就跟大家聊聊有關(guān)JavaScript中有哪些常見(jiàn)的DOM節(jié)點(diǎn)操作，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

為尖草坪等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及尖草坪網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、尖草坪網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

DOM含義：DOM是文檔對(duì)象模型(Document Object Model，是基于瀏覽器編程的一套API接口，是W3C出臺(tái)的推薦標(biāo)準(zhǔn)。其賦予了JS操作節(jié)點(diǎn)的能力。當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器就會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型。

節(jié)點(diǎn)：根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：

1、整個(gè)文檔時(shí)一個(gè)文檔節(jié)點(diǎn)。
2、每個(gè)HTML元素是元素節(jié)點(diǎn)。
3、HTML元素內(nèi)的文本是文本節(jié)點(diǎn)。
4、每個(gè)HTML屬性是屬性節(jié)點(diǎn)。
5、每個(gè)注釋是注釋節(jié)點(diǎn)。

所以HTML DOM 將 HTML 文檔視作樹(shù)結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹(shù)。通過(guò) HTML DOM，節(jié)點(diǎn)樹(shù)中的所有節(jié)點(diǎn)都可以通過(guò) JS 進(jìn)行訪問(wèn)。所有 HTML 元素（節(jié)點(diǎn)）均可被修改。

一、創(chuàng)建節(jié)點(diǎn)、追加節(jié)點(diǎn)

1、createElement（標(biāo)簽名）創(chuàng)建一個(gè)元素節(jié)點(diǎn)（具體的一個(gè)元素）。
2、appendChild（節(jié)點(diǎn)）追加一個(gè)節(jié)點(diǎn)。
3、createTextNode（節(jié)點(diǎn)文本內(nèi)容）創(chuàng)建一個(gè)文本節(jié)點(diǎn)

var oDiv = document.createElement("div");//創(chuàng)建一個(gè)div元素，因?yàn)槭莇ocument對(duì)象的方法。
var oDivText = document.createTextNode("666");//創(chuàng)建一個(gè)文本節(jié)點(diǎn)內(nèi)容是“666”，因?yàn)槭莇ocument對(duì)象的方法。
oDiv.appendChild(oDivText);//父級(jí).appendChild(子節(jié)點(diǎn));在div元素中添加“666”
document.body.appendChild(oDiv);//父級(jí).appendChild(子節(jié)點(diǎn));;document.body是指向元素
document.documentElement.appendChild(createNode);//父級(jí).appendChild(子節(jié)點(diǎn));;document.documentElement是指向元素

二、插入節(jié)點(diǎn)

1、appendChild（節(jié)點(diǎn)）也是一種插入節(jié)點(diǎn)的方式，還可以添加已經(jīng)存在的元素，會(huì)將其元素從原來(lái)的位置移到新的位置。
2、insertBefore（a,b）是參照節(jié)點(diǎn)，意思是a節(jié)點(diǎn)會(huì)插入b節(jié)點(diǎn)的前面。

var oDiv = document.createElement("div");//創(chuàng)建一個(gè)div元素，因?yàn)槭莇ocument對(duì)象的方法。
var oDiv1 = document.getElementById("div1");
document.body.insertBefore(oDiv,oDiv1);//在oDiv1節(jié)點(diǎn)前插入新創(chuàng)建的元素節(jié)點(diǎn)
ul.appendChild(ul.firstChild); //把ul的第一個(gè)元素節(jié)點(diǎn)移到ul子節(jié)點(diǎn)的末尾

三、刪除、移除節(jié)點(diǎn)

1、removeChild(節(jié)點(diǎn)) 刪除一個(gè)節(jié)點(diǎn)，用于移除刪除一個(gè)參數(shù)（節(jié)點(diǎn)）。其返回的被移除的節(jié)點(diǎn)，被移除的節(jié)點(diǎn)仍在文檔中，只是文檔中已沒(méi)有其位置了。

var removeChild = document.body.removeChild(div1);//移除document對(duì)象的方法div1

四、替換節(jié)點(diǎn)

1、replaceChild(插入的節(jié)點(diǎn)，被替換的節(jié)點(diǎn)) ，用于替換節(jié)點(diǎn)，接受兩個(gè)參數(shù)，第一參數(shù)是要插入的節(jié)點(diǎn)，第二個(gè)是要被替換的節(jié)點(diǎn)。返回的是被替換的節(jié)點(diǎn)。

var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2

五、查找節(jié)點(diǎn)

1、childNodes 包含文本節(jié)點(diǎn)和元素節(jié)點(diǎn)的子節(jié)點(diǎn)。

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的對(duì)象。
//nodeType是節(jié)點(diǎn)的類型，利用nodeType來(lái)判斷節(jié)點(diǎn)類型，再去控制子節(jié)點(diǎn)
//nodeType==1 是元素節(jié)點(diǎn)
//nodeType==3 是文本節(jié)點(diǎn)
  if (oList.childNodes[i].nodeType == 1) {//查找到oList內(nèi)的元素節(jié)點(diǎn)
    console.log(oList.childNodes[i]);//在控制器日志中顯示找到的元素節(jié)點(diǎn)
  }
}

2、

A、children也可以獲取子節(jié)點(diǎn)，而且兼容各種瀏覽器。包括IE6-8

B、parentNode：獲取父節(jié)點(diǎn)

var oList = document.getElementById('list');//oList是做的ul的對(duì)象
var oChild=document.getElementById('child');//oChild是做的ul中的一個(gè)li的對(duì)象
//通過(guò)子節(jié)點(diǎn)查找父節(jié)點(diǎn)//parentNode：獲取父節(jié)點(diǎn)
console.log(oChild.parentNode);//在控制器日志中顯示父節(jié)點(diǎn)
console.log(oList.children);//在控制器日志中顯示oList子節(jié)點(diǎn)
console.log(children.length)//子節(jié)點(diǎn)的個(gè)數(shù)

3、

A、firstChild ; firstElementChild查找第一個(gè)子節(jié)點(diǎn)。此存在瀏覽器兼容問(wèn)題：firstChild是IE兼容，firstElementChild是非IE兼容。

//查找第一個(gè)子節(jié)點(diǎn)的封裝函數(shù)
function firstChild(ele) {
  if (ele.firstElementChild) {//如果該條件是true則在該瀏覽器（IE或非IE）中兼容
    return ele.firstElementChild;
  } else {
    return ele.firstChild;
  }
}
firstChild(oList).style.background = 'red';//將獲得的節(jié)點(diǎn)的背景變成紅色

B、lastChild ; lastElementChild查找最后一個(gè)子節(jié)點(diǎn)。此存在瀏覽器兼容問(wèn)題：lastChild 是IE兼容，lastElementChild是非IE兼容。

//查找最后一個(gè)子節(jié)點(diǎn)的封裝函數(shù)
function lastChild(ele) {
  if (ele.lastElementChild) {//如果該條件是true則在該瀏覽器（IE或非IE）中兼容
    return ele.lastElementChild;
  } else {
    return ele.lastChild;
  }
}
lastChild(oList).style.background = 'red';//將獲得的節(jié)點(diǎn)的背景變成紅色

C、nextSibling ; nextElementSibling查找下一個(gè)兄弟節(jié)點(diǎn)。也是存在兼容性問(wèn)題。

//查找下一個(gè)兄弟節(jié)點(diǎn)的封裝函數(shù)
function nextSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.nextElementSibling;
  } else {
    return ele.nextSibling;
  }
}
nextSibling(oMid).style.background = 'red';

D、previousSibling ; previousElementSibling查找上一個(gè)兄弟節(jié)點(diǎn)。也是存在兼容性問(wèn)題。

//查找上一個(gè)兄弟節(jié)點(diǎn)的封裝函數(shù)
function previousSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.previousElementSibling;
  } else {
    return ele.previousSibling;
  }
}
previousSibling(oMid).style.background = 'red';

看完上述內(nèi)容，你們對(duì)JavaScript中有哪些常見(jiàn)的DOM節(jié)點(diǎn)操作有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章題目：JavaScript中有哪些常見(jiàn)的DOM節(jié)點(diǎn)操作-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://weahome.cn/article/pjhsd.html