DOM節點操作之增刪改查
document.write() 可以向文檔中添加節點
但是有個致命問題，會把文檔原有的節點全部清空
因此不推薦使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> 這是原有的節點哦~ <script> myReady(function(){ document.write("這是document.write創建的節點！"); }); </script> </body> </html>
create系列方法：
document.createElement 創建元素節點
document.createTextNode 創建文本節點
document.createComment 創建注釋節點
document.createDocumentFragment 創建文檔片段節點
.appendChild() 追加子元素
document.body.insertBefore(要插入的節點，插入的位置); 在指定位置前插入節點
.firstChild 第一個子元素節點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <ul id="list"></ul> <script> myReady(function(){ var comment=document.createComment("這是注釋呀"); var ul=document.getElementById("list"); var li=null; var fragment=document.createDocumentFragment(); for(var i=0;i<3;i++){ li=document.createElement("li"); li.appendChild(document.createTextNode("item"+(i+1))); fragment.appendChild(li); } ul.appendChild(fragment); document.body.insertBefore(comment,ul); }); </script> </body> </html>
在IE6-8中，createElement可以用來創建文檔中本不存在的元素
可以用來做html5shiv，用於低版本IE兼容html標簽元素
document.createElement()創建的HTML5標簽是可以兼容IE8以下的瀏覽器，並在頁面中正常顯示該標簽所設置的樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> article{color:orange;} </style> </head> <body> <article>直接添加html5元素在IE8以下無法識別</article> <script> var article=document.createElement("article"); article.innerHTML="這是document.createElement創建的HTML5元素"; document.body.appendChild(article); </script> </body> </html>
.split() 字符串轉數組
IE條件編譯語句 /*@cc_on @*/ 里面的內容只有IE會執行，其余瀏覽器會按照注釋來處理，不會執行，可以用於區別是否是IE瀏覽器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } article{ font-size:14px; color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ (function(){ if(!/*@cc_on!@*/0) return; //所有html5新增元素 var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", "); //獲取長度 var len=elements.length; //循環添加這些元素 while(len--){ document.createElement(elements[i]); } })();//匿名函數自執行，可以避免污染全局 }); </script> </head> <body> <article>這是html5元素</article> </body> </html>
以上是錯誤的，html5shiv代碼不能寫在domReady中，因為創建元素需要在dom樹加載之前完成
以下是正確寫法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } article{ font-size:14px; color:orange; } </style> <script src="DomReady.js"></script> <script> (function(){ if(!/*@cc_on!@*/0) return; //所有html5新增元素 var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", "); //獲取長度 var len=elements.length; //循環添加這些元素 while(len--){ document.createElement(elements[len]); } })();//匿名函數自執行，可以避免污染全局 </script> </head> <body> <article>這是html5元素</article> </body> </html>
高效創建節點的方法
innerHTML
outerHTML
innerText
outerText
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <ul id="list"></ul> <script> var ul=document.getElementById("list"); var str="<li>item1</li>"+ "<li>item2</li>"+ "<li>item3</li>"; ul.innerHTML=str; </script> </body> </html>
使用innerHTML的限制：
IE6~8中，要求字符串的最左邊不能出現空格，否則會被移除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } div{ border:2px solid pink; background:#abcdef; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"></div> <script> var box=document.getElementById("box"); var str=" 這是一句話哦~"; box.innerHTML=str; </script> </body> </html>
大多數瀏覽器來說，使用該方法添加的script腳本是無效的，不會執行
script屬於無作用域元素，使用innerHTML添加時會被要求刪除
因此要求script必須在有作用域的元素之后，首選<input type="hidden">
並且需要給script添加defer屬性
這種做法在IE6-8是有效的，在IE高版本以及其他瀏覽器中依舊無效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } div{ border:2px solid pink; background:#abcdef; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"></div> <script> var box=document.getElementById("box"); var str="<input type='hidden'><script defer>alert('hello~');<\/script>"; box.innerHTML=str; </script> </body> </html>
不能單獨創建style meta link等元素
除非也是放置在有作用域的元素之后，如<input type="hidden">
並且只在IE6-8中有效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"></div> <script> var box=document.getElementById("box"); var str="<input type='hidden'><style>body{background:#abcdef;}<\/style>"; box.innerHTML=str; </script> </body> </html>
innerHTML和outerHTML的區別：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"><b>喵喵喵</b></div> <script> console.log(box.innerHTML);//<b>喵喵喵</b> console.log(box.outerHTML);//<div id="box"><b>喵喵喵</b></div> </script> </body> </html>
innerText 提取元素中所有的文本節點
只有文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box">開始~<b>喵喵喵~</b>結束~</div> <br> <div id="new1"></div> <div id="new2"></div> <script> console.log(box.innerText);//開始~喵喵喵~結束~ console.log(box.innerHTML);//開始~<b>喵喵喵~</b>結束~ var new1=document.getElementById("new1"); new1.innerHTML="<b>通過innerHTML添加的</b>"; var new2=document.getElementById("new2"); new2.innerText="<b>通過innerText添加的</b>"; </script> </body> </html>
低版本firefox不支持innerText
使用：textContent 兼容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box">開始~<b>喵喵喵~</b>結束~</div> <script> //獲取innerText function getInnerText(ele){ return (typeof ele.textContent=="string")?ele.textContent:ele.innerText; } //設置innerText function setInnerText(ele,text){ if(typeof ele.textContent=="string"){ ele.textContent=text; }else{ ele.innerText=text; } } console.log(getInnerText(box)); setInnerText(box,"這是通過setInnerText設置的文本哦") </script> </body> </html>
outerText在獲取時和innerText相同
在設置時會替換掉本身的元素，因此不建議使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box">開始~<b>喵喵喵~</b>結束~</div> <script> console.log(box.outerText); box.outerText="這是通過outerText設置的文本哦"; </script> </body> </html>
