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';