l创建DOM元素
•createElement(标签名) 创建一个节点
•appendChild(节点) 追加一个节点
–例子：为ul插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>创建li</title> <script> window.onload=function() { //获取按钮 var oBtn=document.getElementById('btn1'); //获取文本 var oTxt=document.getElementById('txt1'); //获取ul var oUl=document.getElementById('ul1'); oBtn.onclick=function() { //在do里创建li var oLi=document.createElement('li'); //文本框的值赋予oli oLi.innerHTML=oTxt.value; //父类添加子节点 oUl.appendChild(oLi); //清空txt里的值 oTxt.value=''; } } </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul> </body> </html>
l插入元素
•insertBefore(节点, 原有节点) 在已有元素前插入
–例子：倒序插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>父.insertBefore(子节点，谁之前)</title> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function() { //创建个li var oLi=document.createElement('li'); //获取ul里的li var aLi=oUl.getElementsByTagName('li'); //把otxt的值赋予oli oLi.innerHTML=oTxt.value; //插入到oul里ali[0]坐标之前； oUl.insertBefore(oLi, aLi[0]); oTxt.value=''; } } </script> </head>
l删除DOM元素
•removeChild(节点) 删除一个节点
–例子：删除li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>删除节点</title> <script> window.onload=function() { var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0; i<aA.length; i++) { //点击a标签执行函数 aA[i].onclick=function() { //删除oul的父级； oUl.removeChild(this.parentNode); } } } </script> </head> <body> <ul id="ul1"> <li>sdfsdf <a href="javascript:;">删除</a></li> <li>3432 <a href="javascript:;">删除</a></li> <li>tttt <a href="javascript:;">删除</a></li> <li>ww <a href="javascript:;">删除</a></li> </ul>
l文档碎片
•文档碎片可以提高DOM操作性能(理论上)
•文档碎片原理
document.createDocumentFragment
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试文档碎片</title> <script> window.onload=function() { var oBtn1=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oBtn2=document.getElementById('btn2'); oBtn1.onclick=function(){ //获取时间 var iStart=new Date().getTime(); var i=0; for(i=0; i<10000; i++) { //创建个li var oLi=document.createElement('li'); // 添加li到ul oUl.appendChild(oLi); } //减去刚才使用时间 alert(new Date().getTime()-iStart); } oBtn2.onclick=function() { var iStart=new Date().getTime(); //创建文本对象片段 var oFrag=document.createDocumentFragment(); var i=0; for(i=0; i<10000; i++) { //利用文本碎片创建li var oLi=document.createElement('li'); //添加到文本 oFrag.appendChild(oLi); } //获取当前时间减去程序开始时间 alert(new Date().getTime()-iStart); } } </script> </head> <body> <input id="btn1" type="button" value="普通"/> <input id="btn2" type="button" value="碎片"> <ul id="ul1"> </ul> </body> </html>