zoukankan      html  css  js  c++  java
  • DOM创建和删除节点

    一、创建节点

      3步  

      1.创建空元素对象:

        var newElem=document.createElement("标签名");

        例如:var a=document.createElement("a");//<a></a>

      2.设置必要属性

        newElem.属性名="值";

        newElem.innerHTML="文本";

        例如:a.href="http://tmooc.cn";a.innerHTML="go to tmooc";

      3.将元素对象挂载到指定父元素下(2种)

      追加:parent.appendChild(newElem);

      插入新元素:parent.insertBefore(newElem,oldElem);

      强调:只有向已经在页面中的父元素追加新节点,才导致渲染

    二、创建文档片段

      文档片段:内存中,临时存储多个子节点的存储空间

      减少渲染频率: 先将所有平级元素先追加到文档片段中,将文档片段一次性追加到父元素下.

      var frag=new document.createDocumentFragment();

      示例:动态创建表格

      

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <title>动态创建表格</title>
     5 <meta charset="utf-8" />
     6 <style>
     7     table{width:600px; border-collapse:collapse;
     8         text-align:center;
     9     }
    10     td,th{border:1px solid #ccc}
    11 </style>
    12 <script>
    13 
    14     //加入从服务器端收到json字符串如下:
    15     var json="[{'ename':'Tom','salary':5000,'age':25},{'ename':'John','salary':7000,'age':28},{'ename':'mary','salary':6000,'age':26}]";
    16     //使用eval函数,将json字符串,转化为程序中的对象
    17     var emps=eval('('+json+')');
    18     console.log(emps);
    19     //当页面加载后,在data div中创建table对象及子对象
    20     window.onload=function(){
    21         //step1:创建空table对象
    22         var table=document.createElement("table");
    23         //step2:添加表头行
    24 
    25         /*
    26             2.1创建空的tr对象,临时保存在tr中
    27             2.2创建3个空th对象,分别是 姓名 薪资 年龄
    28             2.3将三个th分别追加到tr对象下
    29             2.4将tr追加到table对象下
    30         */
    31         var tr=document.createElement("tr");
    32         var th1=document.createElement("th");
    33         th1.innerHTML="姓名";
    34         var th2=document.createElement("th");
    35         th2.innerHTML="薪资";
    36         var th3=document.createElement("th");
    37         th3.innerHTML="年龄";
    38         tr.appendChild(th1);
    39         tr.appendChild(th2);
    40         tr.appendChild(th3);
    41         table.appendChild(tr);
    42 
    43         //遍历emps数组,将数组中每个对象添加到table中
    44         for (var i=0; i<emps.length; i++)
    45         {
    46             //建立一个tr元素
    47             var tr=document.createElement("tr");
    48             for (var x in emps[i])
    49             {
    50                 //设置td元素
    51                 var td=document.createElement("td");
    52                 if (x=="salary")
    53                 {
    54                     td.innerHTML="&yen;"+emps[i][x].toFixed(2);
    55                 }else{
    56                     td.innerHTML=emps[i][x];
    57                 }
    58                 //将td追加到tr中
    59                 tr.appendChild(td);
    60             }
    61             //将tr追加到table中
    62             table.appendChild(tr);
    63         }
    64 
    65         //Step2:找到data div,将table追加到data下
    66         document.querySelector("#data").appendChild(table);
    67     }
    68 
    69 </script>
    70 </head>
    71 <body>
    72     <div id="data"></div>
    73 </body>
    74 </html>
    View Code

    三、删除、替换节点

      1.删除节点

        parent.removeChild(oldElem);

        oldElem.parentNode.removeChild(oldElem);

      2.替换节点:parent.replaceChild(newElem,oldElem);

      示例:联动菜单 自动添加和删除节点

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <title>联动菜单</title>
     5 <meta charset="utf-8" />
     6 <script>
     7     /*使用 HTML DOM 的方式实现联动菜单*/
     8     var categories=[
     9 {"id":10,"name":'男装',"children":[
    10     {"id":101,"name":'正装'},
    11     {"id":102,"name":'T恤'},
    12     {"id":103,"name":'裤衩'}
    13 ]},
    14 {"id":20,"name":'女装',"children":[
    15     {"id":201,"name":'短裙'},
    16     {"id":202,"name":'连衣裙'},
    17     {"id":203,"name":'裤子',"children":[
    18         {"id":2031,"name":'长裤'},
    19         {"id":2031,"name":'九分裤'},
    20         {"id":2031,"name":'七分裤'}
    21     ]},
    22 ]},
    23 {"id":30,"name":'童装',"children":[
    24     {"id":301,"name":'帽子'},
    25     {"id":302,"name":'套装',"children":[
    26         {"id":3021,"name":"0-3岁"},
    27         {"id":3021,"name":"3-6岁"},
    28         {"id":3021,"name":"6-9岁"},
    29         {"id":3021,"name":"9-12岁"}
    30     ]},
    31     {"id":303,"name":'手套'}
    32 ]}
    33 ];
    34 
    35 //专门遍历一级分类 data保存当前同级分类的数组
    36 function loadData(data){
    37     //创建一个select对象
    38     //在select对象中追加一个新option,内容为请选择"-请选择-",值为0
    39     //遍历data中每个类别对象
    40     // 每遍历一个,就要在select中追加一个option,内容是当前对象的name属性值为当前对象的id属性
    41     //
    42     var select=document.createElement("select");
    43     select.add(new Option("-请选择-",0));
    44     for (var key in data)
    45     {
    46         select.add(new Option(data[key].name,data[key].id));
    47     }
    48     //为新创建的select对象,添加onchange时间
    49     select.onchange=function(){
    50         //this-->select
    51         
    52         //将当前select后的元素都删除
    53         var parent=this.parentNode;
    54         while(parent.lastChild!=this){
    55             parent.removeChild(parent.lastChild);
    56         }
    57 
    58         /*
    59             获得和选中项位置对应的类别子对象
    60         */
    61         var category=data[this.selectedIndex-1];
    62         if(category!=undefined&&category.children){
    63             loadData(category.children);
    64         }
    65     }
    66     document.querySelector("#category").appendChild(select);
    67 
    68 }
    69 
    70 window.onload=function(){
    71     loadData(categories);
    72 }
    73     
    74 </script>
    75 </head>
    76 <body>
    77     <div id="category"></div>
    78 </body>
    79 </html>
    View Code
  • 相关阅读:
    366. Find Leaves of Binary Tree输出层数相同的叶子节点
    716. Max Stack实现一个最大stack
    515. Find Largest Value in Each Tree Row查找一行中的最大值
    364. Nested List Weight Sum II 大小反向的括号加权求和
    156. Binary Tree Upside Down反转二叉树
    698. Partition to K Equal Sum Subsets 数组分成和相同的k组
    244. Shortest Word Distance II 实现数组中的最短距离单词
    187. Repeated DNA Sequences重复的DNA子串序列
    java之hibernate之基于主键的双向一对一关联映射
    java之hibernate之基于主键的单向一对一关联映射
  • 原文地址:https://www.cnblogs.com/Medeor/p/4909349.html
Copyright © 2011-2022 走看看