javasript 的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、 建立節點、追加節點
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元素中添加6666
document.body.appendChild(oDiv) // 父級.appendChild(子節點);document.body是指向<body> 元素
document.documentElement.appendChild(createNode) //父級.appendChild(子節點); document.documentElement 是指向html 元素
x
1
var oDiv = document.createElement('div') // 常見一個div元素，由於是document 對象的方法
2
var oDivText = document.createTextNode('666') // 建立一個文本節點內容是666 , 由於是document 對象的方法
3
oDiv.appendChild(oDivText) // 父級.appendChild(子節點); 在div元素中添加6666
4
document.body.appendChild(oDiv) // 父級.appendChild(子節點);document.body是指向<body> 元素
5
document.documentElement.appendChild(createNode) //父級.appendChild(子節點); document.documentElement 是指向html 元素
2、插入節點
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
1
var oDiv = document.createElement("div");//建立一個div元素，由於是document對象的方法。
2
var oDiv1 = document.getElementById("div1");
3
document.body.insertBefore(oDiv,oDiv1);//在oDiv1節點前插入新建立的元素節點
4
ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾
5
注： 在練習的時候，
注意以上2種寫法的差異，下面一種換行的方式會致使，最後一個lastChild 是空格節點，因此必須保證同一行
詳見附件方法
3、刪除、移除節點
一、removeChild(節點) 刪除一個節點，用於移除刪除一個參數（節點）。其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了。
一、removeChild(節點) 刪除一個節點，用於移除刪除一個參數（節點）。其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了。
var removeChild = document.body.removeChild(div1);//移除document對象的方法div1
1
1
var removeChild = document.body.removeChild(div1);//移除document對象的方法div1
4、替換節點
一、replaceChild(插入的節點，被替換的節點) ，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。
一、replaceChild(插入的節點，被替換的節點) ，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。
var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2
1
1
var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2
5、查找節點
一、childNodes 包含文本節點和元素節點的子節點。
一、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]);//在控制器日誌中顯示找到的元素節點
}
}
1
1
for (var i = 0; i < oList.childNodes.length; i++) {//oList是作的ul的對象。
2
//nodeType是節點的類型，利用nodeType來判斷節點類型，再去控制子節點
3
//nodeType==1 是元素節點
4
//nodeType==3 是文本節點
5
if (oList.childNodes[i].nodeType == 1) {//查找到oList內的元素節點
6
console.log(oList.childNodes[i]);//在控制器日誌中顯示找到的元素節點
7
}
8
}
二、A、children也能夠獲取子節點，並且兼容各類瀏覽器。包括IE6-8
B、parentNode：獲取父節點
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)//子節點的個數
1
1
var oList = document.getElementById('list');//oList是作的ul的對象
2
var oChild=document.getElementById('child');//oChild是作的ul中的一個li的對象
3
//經過子節點查找父節點//parentNode：獲取父節點
4
console.log(oChild.parentNode);//在控制器日誌中顯示父節點
5
console.log(oList.children);//在控制器日誌中顯示oList子節點
6
console.log(children.length)//子節點的個數
三、A、firstChild ; firstElementChild查找第一個子節點。此存在瀏覽器兼容問題：firstChild是IE兼容，firstElementChild是非IE兼容。
<span style="white-space:pre"> </span>//查找第一個子節點的封裝函數
<span style="white-space:pre"> </span>function firstChild(ele) {
<span style="white-space:pre"> </span>if (ele.firstElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是該條件是true則在該瀏覽器（IE或非IE）中兼容</span>
<span style="white-space:pre"> </span> return ele.firstElementChild;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.firstChild;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>firstChild(oList).style.background = 'red';//將得到的節點的背景變成紅色
1
1
<span style="white-space:pre"> </span>//查找第一個子節點的封裝函數
2
<span style="white-space:pre"> </span>function firstChild(ele) {
3
<span style="white-space:pre"> </span>if (ele.firstElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是該條件是true則在該瀏覽器（IE或非IE）中兼容</span>
4
<span style="white-space:pre"> </span> return ele.firstElementChild;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.firstChild;
7
<span style="white-space:pre"> </span>}
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>firstChild(oList).style.background = 'red';//將得到的節點的背景變成紅色
B、lastChild ; lastElementChild查找最後一個子節點。此存在瀏覽器兼容問題：lastChild 是IE兼容，lastElementChild是非IE兼容。
<span style="white-space:pre"> </span>//查找最後一個子節點的封裝函數
<span style="white-space:pre"> </span>function lastChild(ele) {
<span style="white-space:pre"> </span>if (ele.lastElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是該條件是true則在該瀏覽器（IE或非IE）中兼容</span>
<span style="white-space:pre"> </span> return ele.lastElementChild;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.lastChild;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>lastChild(oList).style.background = 'red';//將得到的節點的背景變成紅色
1
1
<span style="white-space:pre"> </span>//查找最後一個子節點的封裝函數
2
<span style="white-space:pre"> </span>function lastChild(ele) {
3
<span style="white-space:pre"> </span>if (ele.lastElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是該條件是true則在該瀏覽器（IE或非IE）中兼容</span>
4
<span style="white-space:pre"> </span> return ele.lastElementChild;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.lastChild;
7
<span style="white-space:pre"> </span>}
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>lastChild(oList).style.background = 'red';//將得到的節點的背景變成紅色
C、nextSibling ; nextElementSibling查找下一個兄弟節點。也是存在兼容性問題。
<span style="white-space:pre"> </span>//查找下一個兄弟節點的封裝函數
<span style="white-space:pre"> </span>function nextSibling(ele) {
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
<span style="white-space:pre"> </span> return ele.nextElementSibling;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.nextSibling;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>nextSibling(oMid).style.background = 'red';
1
1
<span style="white-space:pre"> </span>//查找下一個兄弟節點的封裝函數
2
<span style="white-space:pre"> </span>function nextSibling(ele) {
3
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
4
<span style="white-space:pre"> </span> return ele.nextElementSibling;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.nextSibling;
7
<span style="white-space:pre"> </span>}
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>nextSibling(oMid).style.background = 'red';
D、previousSibling ; previousElementSibling查找上一個兄弟節點。也是存在兼容性問題。
<span style="white-space:pre"> </span>//查找上一個兄弟節點的封裝函數
<span style="white-space:pre"> </span>function previousSibling(ele) {
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
<span style="white-space:pre"> </span> return ele.previousElementSibling;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.previousSibling;
<span style="white-space:pre"> </span> }
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>previousSibling(oMid).style.background = 'red';
1
1
<span style="white-space:pre"> </span>//查找上一個兄弟節點的封裝函數
2
<span style="white-space:pre"> </span>function previousSibling(ele) {
3
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
4
<span style="white-space:pre"> </span> return ele.previousElementSibling;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.previousSibling;
7
<span style="white-space:pre"> </span> }
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>previousSibling(oMid).style.background = 'red';
轉載至：http://blog.csdn.net/torrex/article/details/54376633
附件列表
相關文章
- 1. js的DOM節點操做：建立 ，插入，刪除，複製，查找節點
- 2. 插入節點 建立節點 對文本操做 刪除節點
- 3. JavaScript節點操做--建立節點、添加節點、刪除節點、複製節點
- 4. DOM操做——怎樣添加、移除、移動、複製、建立和查找節點
- 5. JS DOM操做（建立、遍歷、獲取、操做、刪除節點）
- 6. javascript對DOM節點的建立--插入--刪除操做---appendChild()注意事項！
- 7. jQuery DOM節點的建立、插入、刪除
- 8. jQuery DOM操做之刪除節點
- 9. DOM節點變更事件，監聽節點刪除、插入操做
- 10. JS 進階(5) DOM操做：dom加載完畢執行js、建立節點、遍歷節點、查找節點、刪除節點
- 更多相關文章...
- • XML DOM 刪除節點 - XML DOM 教程
- • XML DOM 節點 - XML DOM 教程
- • 算法總結-二分查找法
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js的DOM節點操做：建立 ，插入，刪除，複製，查找節點
- 2. 插入節點 建立節點 對文本操做 刪除節點
- 3. JavaScript節點操做--建立節點、添加節點、刪除節點、複製節點
- 4. DOM操做——怎樣添加、移除、移動、複製、建立和查找節點
- 5. JS DOM操做（建立、遍歷、獲取、操做、刪除節點）
- 6. javascript對DOM節點的建立--插入--刪除操做---appendChild()注意事項！
- 7. jQuery DOM節點的建立、插入、刪除
- 8. jQuery DOM操做之刪除節點
- 9. DOM節點變更事件，監聽節點刪除、插入操做
- 10. JS 進階(5) DOM操做：dom加載完畢執行js、建立節點、遍歷節點、查找節點、刪除節點