js+DOM创建和操作节点 - 日理万妓 2022-03-28 03:37 219阅读 0赞 1.创建节点并添加内容:使用的方法:createElement和createTextNode <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> function Message() \{ var op=document.createElement("p"); var oText=document.createTextNode("hello world!"); op.appendChild(oText); document.body.appendChild(op); \} </script> </head> <body οnlοad="Message();"> </body> </html> 2,删除节点 方法:getElementsByTagName和removeChild <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> function removeMessage() \{ var op=document.body.getElementsByTagName("p")\[0\]; op.parentNode.removeChild(op); \} </script> </head> <body οnlοad="removeMessage();"> <p>hello world!</p> </body> </html> 3.替换节点 方法replace(new,old) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> function replaceMessage() \{ var oNewp=document.createElement("p"); var oText=document.createTextNode("World Hello"); oNewp.appendChild(oText); var oOldp=document.body.getElementsByTagName("p")\[0\]; oOldp.parentNode.replaceChild(oNewp,oOldp); \} </script> </head> <body οnlοad="replaceMessage();"> <p>hello world!</p> </body> </html> 4.插入新消息 insertBefore(new,old) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> function replaceMessage() \{ var oNewp=document.createElement("p"); var oText=document.createTextNode("World Hello"); oNewp.appendChild(oText); var oOldp=document.body.getElementsByTagName("p")\[0\]; document.body.insertBefore(oNewp,oOldp); \} </script> </head> <body οnlοad="replaceMessage();"> <p>hello world!</p> </body> </html> 5,文档碎片 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* \* 当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中 \* 方法:createDocumentFragment() \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/ function replaceMessage() \{ var arrText=\["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"\]; var oFragment=document.createDocumentFragment();//文档碎片 for(var i=0;i<arrText.length;i++) \{ var op=document.createElement("p"); var oText=document.createTextNode(arrText\[i\]); op.appendChild(oText); oFragment.appendChild(op); \} document.body.appendChild(oFragment); \} </script> </head> <body οnlοad="replaceMessage();"> <p>hello world!</p> </body> </html> 6,操作document元素属性 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML DOM</title> <script type=text/javascript> function Load\_message() \{ var oimg=document.getElementById("a"); alert(oimg.getAttribute("border")); oimg.setAttribute("alt","DOM Test"); \} </script> </head> <body οnlοad="Load\_message();"> <img border="0" width="100" height="150" id="a"/> </body> </html>
还没有评论，来说两句吧...