您的位置：首页 > 编程语言

DOM对象模型高级编程(删改)

2016-07-21 17:25 435 查看

<!doctype html>

<html>

   <head>

       <title>新内容</title>

       <style type="text/css">

           #div{

               border:1px solid red;

               height:500px;

           }

       </style>



       <script type="text/javascript">

           function cleanWhitespaceDG(nodeObj){

               for(var i=nodeObj.childNodes.length-1;i>=0;i--){

                      var node=nodeObj.childNodes[i];

                      if(node.nodeType==3 && /\s/.test(node.nodeValue)){   //文本节点并且文本节点的值为空白

                       node.parentNode.removeChild(node);

                       continue;

                      }

                      cleanWhitespaceDG(node);

               }

           }

           function cloneDiv (){//克隆Div

               var div = document.getElementById("div");

               cleanWhitespaceDG(div); //把div中的所有空白节点全部清除

               var c = div.cloneNode(false); //调用克隆

               document.body.appendChild(c); //把复制品追加到网页最后

           }

           function cleanWhitespaceDG(nodeObj){

   for(var i=nodeObj.childNodes.length-1;i>=0;i--){

          var node=nodeObj.childNodes[i];

          if(node.nodeType==3 && /\s/.test(node.nodeValue)){   //文本节点并且文本节点的值为空白

           node.parentNode.removeChild(node);

           continue;

          }

          cleanWhitespaceDG(node);

   }

}

           /*

           number

           string

           boolean

           undefined

           null

           */

           function reSecRow (){ //删除第二行

               //1. 找到第二行对象,也就是tr对象

               var tr = document.getElementById("tab").firstChild.lastChild;

               if(tr!=null){

                   //2. 让tr的父节点调用remove删除tr自己

                   tr.parentNode.removeChild(tr);

               }else{

                   alert("删除有误!");

               }

           }

           function repGirl (){ //替换美女

               //找到需要替换的元素

               var img = document.getElementById("img");

               //创建一个新的元素, 用来替换旧元素

               var newImg = document.createElement("img");

               newImg.src="28.gif";

               newImg.width="200";

               //替换用旧的元素执行替换过程

               img.parentNode.replaceChild(newImg,img);

           }

           function myload(){

               var obj=document.body;

               cleanWhitespaceDG(obj);

           }

       </script>



   </head>

   <body onload="myload()">

       <input type="button" value="克隆Div" onclick="cloneDiv()">

       <input type="button" value="删除第二行" onclick="reSecRow()">

       <input type="button" value="替换美女" onclick="repGirl()">

       <div id="div">



           <table id="tab"border="1" width="400px" height="300px">

           <tbody>

                   <tr>

                       <td>111</td>

                       <td>222</td>

                       <td>333</td>

                       <td>444</td>

                   </tr>

                   <tr>

                       <td>555</td>

                       <td>666</td>

                       <td>777</td>

                       <td>888</td>

                   </tr>

               </tbody>

           </table>

           <img src="13.gif" width="200px" id="img" />

       </div>

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航