- <!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" />
- <head>
- <title>簡單入門DOM</title>
- <script language="javascript">
- window.onload=initDom;
- function initDom(){
- document.getElementsByTagName("form")[0].onsubmit=function(){return initAdd();}
- document.getElementById("delNode").onclick=nodeDel;
- }
- function initAdd(){
- var txt=document.getElementById("textArea").value; //獲取
- var newTxt = document.createTextNode(txt); //新建文本節點
- var newGref = document.createElement("p"); //新建元素節點
- newGref.appendChild(newTxt); //添加節點
- var docBody = document.getElementsByTagName("body")[0]; //取到文檔尾
- docBody.appendChild(newGref); //添加節點
- return false; //不讓表單提交
- }
- function nodeDel(){
- var t_node = document.getElementsByTagName("p");
- if(t_node.length > -1){
- if(t_node.length!=0){
- var node_id = t_node.item(t_node.length-1); //最後一個節點開始刪除
- }else{
- alert("已經全部刪除了");
- return false;
- }
- var docBody = document.getElementsByTagName("body")[0];
- docBody.removeChild(node_id); //執行刪除節點操作
- return false;
- }
- }
- </script>
- <style type="text/css">
- body{ width: 600px; font-size: 12px; color: red; margin: 50px auto;}
- p{ padding: 10px; border: 1px solid #F90; background:#FDF1CC; }
- </style>
- </head>
- <body>
- <form action="#">
- <textarea id="textArea" rows="8" cols="80"></textarea><br /><br />
- <input type="submit" value="OK! 執行操作" />
- <br />
- <a href="#" id="delNode">刪除節點!</a>
- </form>
- </body>
- </html>
簡單的DOM，操縱節點
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章