溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關JavaScript中有哪些常見的DOM節點操作，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
DOM含義：DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程的一套API接口，是W3C出臺的推薦標準。其賦予了JS操作節點的能力。當網頁被加載時，瀏覽器就會創建頁面的文檔對象模型。
節點：根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
1、整個文檔時一個文檔節點。
2、每個HTML元素是元素節點。
3、HTML元素內的文本是文本節點。
4、每個HTML屬性是屬性節點。
5、每個注釋是注釋節點。
所以HTML DOM 將 HTML 文檔視作樹結構，這種結構被稱為節點樹。通過 HTML DOM，節點樹中的所有節點都可以通過 JS 進行訪問。所有 HTML 元素（節點）均可被修改。
一、創建節點、追加節點
1、createElement（標簽名）創建一個元素節點（具體的一個元素）。
2、appendChild（節點）追加一個節點。
3、createTextNode（節點文本內容）創建一個文本節點
var oDiv = document.createElement("div");//創建一個div元素，因為是document對象的方法。
var oDivText = document.createTextNode("666");//創建一個文本節點內容是“666”，因為是document對象的方法。
oDiv.appendChild(oDivText);//父級.appendChild(子節點);在div元素中添加“666”
document.body.appendChild(oDiv);//父級.appendChild(子節點);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父級.appendChild(子節點);;document.documentElement是指向<html>元素二、插入節點
1、appendChild（節點）也是一種插入節點的方式，還可以添加已經存在的元素，會將其元素從原來的位置移到新的位置。
2、insertBefore（a,b）是參照節點，意思是a節點會插入b節點的前面。
var oDiv = document.createElement("div");//創建一個div元素，因為是document對象的方法。
var oDiv1 = document.getElementById("div1");
document.body.insertBefore(oDiv,oDiv1);//在oDiv1節點前插入新創建的元素節點
ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾三、刪除、移除節點
1、removeChild(節點) 刪除一個節點，用于移除刪除一個參數（節點）。其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了。
var removeChild = document.body.removeChild(div1);//移除document對象的方法div1
四、替換節點
1、replaceChild(插入的節點，被替換的節點) ，用于替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。
var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2
五、查找節點
1、childNodes 包含文本節點和元素節點的子節點。
for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的對象。
//nodeType是節點的類型，利用nodeType來判斷節點類型，再去控制子節點
//nodeType==1 是元素節點
//nodeType==3 是文本節點
if (oList.childNodes[i].nodeType == 1) {//查找到oList內的元素節點
console.log(oList.childNodes[i]);//在控制器日志中顯示找到的元素節點
}
}2、
A、children也可以獲取子節點，而且兼容各種瀏覽器。包括IE6-8
B、parentNode：獲取父節點
var oList = document.getElementById('list');//oList是做的ul的對象
var oChild=document.getElementById('child');//oChild是做的ul中的一個li的對象
//通過子節點查找父節點//parentNode：獲取父節點
console.log(oChild.parentNode);//在控制器日志中顯示父節點
console.log(oList.children);//在控制器日志中顯示oList子節點
console.log(children.length)//子節點的個數3、
A、firstChild ; firstElementChild查找第一個子節點。此存在瀏覽器兼容問題：firstChild是IE兼容，firstElementChild是非IE兼容。
//查找第一個子節點的封裝函數
function firstChild(ele) {
if (ele.firstElementChild) {//如果該條件是true則在該瀏覽器（IE或非IE）中兼容
return ele.firstElementChild;
} else {
return ele.firstChild;
}
}
firstChild(oList).style.background = 'red';//將獲得的節點的背景變成紅色B、lastChild ; lastElementChild查找最后一個子節點。此存在瀏覽器兼容問題：lastChild 是IE兼容，lastElementChild是非IE兼容。
//查找最后一個子節點的封裝函數
function lastChild(ele) {
if (ele.lastElementChild) {//如果該條件是true則在該瀏覽器（IE或非IE）中兼容
return ele.lastElementChild;
} else {
return ele.lastChild;
}
}
lastChild(oList).style.background = 'red';//將獲得的節點的背景變成紅色C、nextSibling ; nextElementSibling查找下一個兄弟節點。也是存在兼容性問題。
//查找下一個兄弟節點的封裝函數
function nextSibling(ele) {
if (ele.nextElementSibling) {
return ele.nextElementSibling;
} else {
return ele.nextSibling;
}
}
nextSibling(oMid).style.background = 'red';D、previousSibling ; previousElementSibling查找上一個兄弟節點。也是存在兼容性問題。
//查找上一個兄弟節點的封裝函數
function previousSibling(ele) {
if (ele.nextElementSibling) {
return ele.previousElementSibling;
} else {
return ele.previousSibling;
}
}
previousSibling(oMid).style.background = 'red';看完上述內容，你們對JavaScript中有哪些常見的DOM節點操作有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
