+发表新主题
查看: 1582|回复: 0

[代码片段] DOM 修改元素内容

[复制链接]

[代码片段] DOM 修改元素内容

[复制链接]
殷三姗 发表于 2016-1-13 19:58:32 浏览:  1582 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
回顾昨天关于querySelector选择器：Selector API


1. 如果使用document调用Selector API，选择器作用范围是整个页面

2. 如果使用父元素对象调用Selector API，选择器作用范围是父元素下所有子节点。


今天学习如何修改元素的内容,

1. 修改元素的内容：

      1. innerHTML：获取或设置元素开始标签到结束标签之间的HTML内容。

           何时使用：只要获取或设置元素的内容时

         固定套路：2个：

              1. 清空子元素：parent.innerHTML="";  

              2. 批量替换子元素：

           parent.innerHTML="所有子元素标签组成的html字符串"


           批量删除和单独删除元素对象的效率差异：

                  DOM Tree-->Render Tree

                                  ↑

                           layout(reflow) 最耗时

             1.尽量少触发layout,增加和删除元素节点

             2.批量操作减少触发layout，提高执行效率

例如：

  2.    <!DOCTYPE html>

  3. <html>

  4. <head>

  5.   <title> new document </title>

  6.   <meta charset="utf-8" />

  7. </head>

  8. <body>

  9.   <ul id="navi"

  10. style="height:200px;width:200px;border:1px solid red">

  11. <li>电影</li>

  12. <li>电视剧</li>

  13. <li>广告</li>

  14. <li>音乐</li>

  15.   </ul>

  16.   <button onclick="document.getElementById('navi').innerHTML=''">click me</button>

  17. </body>

  18. </html>
复制代码
这是页面效果:

    195226iqhhdxd55wyp5kuq.png    

这是点击按钮之后的效果:

    195226iqhhdxd55wyp5kuq.png       


例如:

     

  2. <!DOCTYPE HTML>

  3. <html>

  4. <head>

  5. <title>读取并修改元素的内容</title>

  6. <meta charset="utf-8" />

  7. <style>

  8. div{float:left; height: 100px; line-height: 100px; }

  9. #d1,#d3{ background-color: #ccff00; }

  10. #d2{ cursor: pointer; background-color: #ffcc00; }

  11. .hide{display:none};

  12. </style>

  13. <script>

  14. function toggle(d2){

  15. //找到d1，同时设置d1的className

  16. var d1=document.getElementById("d1");

  17. //        如果d1的className!=""，就改为"",

  18. //                            否则改为hide

  19. d1.className=d1.className!=""?"":"hide";

  20. //如果d2的innerHTML等于"<<",就改为">>"

  21.                               //否则改回lt

  22. d2.innerHTML=d2.innerHTML=="<<"?">>":

  23.                                       "<<";

  24. }

  25. </script>

  26. </head>

  27. <body>

  28. <div id="d1">树形列表</div>

  29. <div id="d2" onclick="toggle(this)"><<</div>

  30. <div id="d3">内容的主体</div>

  31. </body>

  32. </html>
复制代码
  页面效果:

   195226iqhhdxd55wyp5kuq.png      

点击 << 之后效果:

         195226iqhhdxd55wyp5kuq.png

再点击 >> 之后的效果:

       195226iqhhdxd55wyp5kuq.png


例如:

  2. <!DOCTYPE HTML>

  3. <html>

  4. <head>

  5. <title>读取并修改元素的内容</title>

  6. <meta charset="utf-8" />

  7. <style>

  8. select{width:100px;height:85px;}

  9. div{display:inline-block;width:50px}

  10. </style>

  11. <script src="js/2_2.js"></script>

  12. </head>

  13. <body>

  14. <!--假设两个select元素，分别保存备选地区列表和选中地区列表

  15.      实现两选择框之间选项的交换：

  16.     包括：点击"<"或">"，当个选中项左右移动

  17.           点击<<或>>，多个选中项 左右移动

  18.            全左移和全右移

  19.    要求：两个select中的地区都要按照名称首字母排序

  20. -->

  21. <select id="unsel" size="5" multiple>

  22. <option>阿根廷</option>

  23. <option>巴西</option>

  24. <option>加拿大</option>

  25. <option>智利</option>

  26. <option>中国</option>

  27. <option>古巴</option>

  28. <option>德玛西亚</option>

  29. <option>埃及</option>

  30. <option>法国</option>

  31. <option>希腊</option>

  32. <option>西班牙</option>

  33. </select>

  34. <div>

  35. <button onclick="move(this)">>></button>

  36. <button onclick="move(this)">></button>

  37. <button onclick="move(this)"><</button>

  38. <button onclick="move(this)"><<</button>

  39. </div>

  40. <select id="sel" size="5" multiple>

  41. </select>

  42. </body>

  43. </html>
复制代码
下面是js文件:   

  2. window.onload=function(){

  3. (function(){

  4. //找到id为unsel的select元素，保存unsel中

  5. var unsel=document.getElementById("unsel");

  6. unselArr=unsel.innerHTML

  7.      //将unsel的innerHTML，替换开始位置的s*<option>为""

  8.   .replace(/^s*<option>/,"")   

  9.                     //替换结束位置的</option>s*为""

  10.           .replace(/</option>s*$/,"")

  11. //按</option>s*<option>切割

  12.   .split(/</option>s*<option>/)

  13. })();

  14. }

  15. var unselArr=[];

  16. var selArr=[];

  17. function move(btn){

  18. switch(btn.innerHTML){

  19. case ">>"://将unselArr拼接到selArr结尾

  20. selArr=selArr.concat(unselArr);

  21. unselArr=[];

  22. break;

  23. case "<<"://将selArr拼接到unselArr结尾

  24. unselArr=unselArr.concat(selArr);

  25. selArr=[];

  26. break;

  27. case ">"://将unselArr中选中的项移动到selArr中

  28.     //找到unsel中所有option，保存在变量opts中

  29. var opts=document.querySelectorAll("#unsel>option");

  30. //i从opts.length-1开始，遍历opts中每个option

  31. //     到0结束，每次递减1

  32. for(var i=opts.length-1;i>=0;i--){

  33. //        如果当前opt的selected属性有效

  34. if(opts[i].selected){

  35. //        将unselArr中i位置的元素删除，用变量delete接住，

  36. //      取delete中第0个元素，追加到selArr中

  37. selArr.push(unselArr.splice(i,1)[0]);

  38. }

  39. }

  40. break;

  41. case "<":

  42.             //获取unsel中所有option,保存在变量opts

  43.     var opts=this.sel.getElementsByTagName("option");

  44. //从后向前遍历opts

  45. for(var i=opts.length-1;i>=0;i--){

  46.      //   如果当前option被选中

  47.    if(opts[i].selected){

  48.      //从selArr中删除相同位置的元素,同时将删除的元素压入unselArr中

  49. this.unselArr.push(this.selArr.splice(i,1));

  50.    }

  51.     }

  52. break;

  53. }//每次移动完，都要排序

  54. unselArr.sort();

  55. selArr.sort();

  56. show();

  57. }

  58. function show(){ //将每次移动后的两个数组join成html字符串，

  59. //放到对应sel元素的内容中

  60.     //找到id为unsel的元素，保存在变量unsel中

  61. var unsel=document.getElementById("unsel");

  62. if(unselArr.length==0){//如果unselArr的长度为0

  63. unsel.innerHTML="";//就将unsel的内容设置为""

  64. }else{//否则：先拼unsel中的内容

  65. //将拼好的html放入,unsel中

  66. unsel.innerHTML=

  67. "<option>"+unselArr.join("</option><option>")+"</option>";

  68. }

  69. //找到id为sel的元素，保存在变量sel中

  70. var sel=document.getElementById("sel");

  71. if(selArr.length==0){//如果selArr的长度为0

  72. sel.innerHTML="";//就将sel的内容设置为""

  73. }else{//否则：先拼sel中的内容

  74. //        将拼好的html放入,sel中

  75. sel.innerHTML=

  76. "<option>"+selArr.join("</option><option>")+"</option>";

  77. }

  78. }
复制代码
下面是页面效果:

    195226iqhhdxd55wyp5kuq.png

点击 >> 后：

   195226iqhhdxd55wyp5kuq.png      

点击 << 后:

    195226iqhhdxd55wyp5kuq.png   

选择 中国,点击 > 后:

    195226iqhhdxd55wyp5kuq.png      

再选择 中国,点击 < 后:

    195226iqhhdxd55wyp5kuq.png      

上面练习中,需要注意的问题:

            1. option元素，selected属性表示是否被选中

                                      可当做bool类型用

            2. 遍历过程中可能减少元素个数时，都要从后向前遍历



  2. textContent : 获取或设置开始标签到结束标签之间的文本内容

                        剔除了子标签，自动转换特殊符号为原文

         IE8则换位innerText：
回复

使用道具 举报

精彩评论 (0) QQ好友和群QQ好友和群

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

殷三姗
技冠群雄

34

主题

36

帖子

106

积分

技冠群雄

Rank: 6Rank: 6

积分
106
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网