找回密码
 立即注册

QQ登录

只需一步,快速开始

微信葡京娱乐网址号开发资源

关注:848

所属分类: 微信开发 微信葡京娱乐网址号开发资源

本版块为微信葡京娱乐网址号开发教程与葡京娱乐网址号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] DOM 修改元素内容

[复制链接]
查看: 5427|回复: 6
最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
回顾昨天关于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,提高执行效率
例如:
  1.    <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title> new document </title>
  5.   <meta charset="utf-8" />
  6. </head>
  7. <body>
  8.   <ul id="navi"
  9. style="height:200px;width:200px;border:1px solid red">
  10. <li>电影</li>
  11. <li>电视剧</li>
  12. <li></li>
  13. <li>音乐</li>
  14.   </ul>
  15.   <button onclick="document.getElementById('navi').innerHTML=''">click me</button>
  16. </body>
  17. </html>
复制葡京赌场网站

这是页面效果:
    图片1.png    
这是点击按钮之后的效果:
    图片2.png       
例如:
     
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>读取并修改元素的内容</title>
  5. <meta charset="utf-8" />
  6. <style>
  7. div{float:left; height: 100px; line-height: 100px; }
  8. #d1,#d3{ background-color: #ccff00; }
  9. #d2{ cursor: pointer; background-color: #ffcc00; }
  10. .hide{display:none};
  11. </style>
  12. <script>
  13. function toggle(d2){
  14. //找到d1,同时设置d1的className
  15. var d1=document.getElementById("d1");
  16. //        如果d1的className!="",就改为"",
  17. //                            否则改为hide
  18. d1.className=d1.className!=""?"":"hide";
  19. //如果d2的innerHTML等于"<<",就改为">>"
  20.                               //否则改回lt
  21. d2.innerHTML=d2.innerHTML=="<<"?">>":
  22.                                       "<<";
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <div id="d1">树形列表</div>
  28. <div id="d2" onclick="toggle(this)"><<</div>
  29. <div id="d3">内容的主体</div>
  30. </body>
  31. </html>
复制葡京赌场网站

  页面效果:
   图片3.png      
点击 << 之后效果:
         图片4.png
再点击 >> 之后的效果:
       图片5.png

例如:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>读取并修改元素的内容</title>
  5. <meta charset="utf-8" />
  6. <style>
  7. select{width:100px;height:85px;}
  8. div{display:inline-block;width:50px}
  9. </style>
  10. <script src="js/2_2.js"></script>
  11. </head>
  12. <body>
  13. <!--假设两个select元素,分别保存备选地区列表和选中地区列表
  14.      实现两选择框之间选项的交换:
  15.     包括:点击"<"或">",当个选中项左右移动
  16.           点击<<或>>,多个选中项 左右移动
  17.            全左移和全右移
  18.    要求:两个select中的地区都要按照名称首字母排序
  19. -->
  20. <select id="unsel" size="5" multiple>
  21. <option>阿根廷</option>
  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. </select>
  33. <div>
  34. <button onclick="move(this)">>></button>
  35. <button onclick="move(this)">></button>
  36. <button onclick="move(this)"><</button>
  37. <button onclick="move(this)"><<</button>
  38. </div>
  39. <select id="sel" size="5" multiple>
  40. </select>
  41. </body>
  42. </html>
复制葡京赌场网站

下面是js文件:   
  1. window.onload=function(){
  2. (function(){
  3. //找到id为unsel的select元素,保存unsel中
  4. var unsel=document.getElementById("unsel");
  5. unselArr=unsel.innerHTML
  6.      //将unsel的innerHTML,替换开始位置的\s*<option>为""
  7.   .replace(/^\s*<option>/,"")   
  8.                     //替换结束位置的<\/option>\s*为""
  9.           .replace(/<\/option>\s*$/,"")
  10. //按<\/option>\s*<option>切割
  11.   .split(/<\/option>\s*<option>/)
  12. })();
  13. }
  14. var unselArr=[];
  15. var selArr=[];
  16. function move(btn){
  17. switch(btn.innerHTML){
  18. case ">>"://将unselArr拼接到selArr结尾
  19. selArr=selArr.concat(unselArr);
  20. unselArr=[];
  21. break;
  22. case "<<"://将selArr拼接到unselArr结尾
  23. unselArr=unselArr.concat(selArr);
  24. selArr=[];
  25. break;
  26. case ">"://将unselArr中选中的项移动到selArr中
  27.     //找到unsel中所有option,保存在变量opts中
  28. var opts=document.querySelectorAll("#unsel>option");
  29. //i从opts.length-1开始,遍历opts中每个option
  30. //     到0结束,每次递减1
  31. for(var i=opts.length-1;i>=0;i--){
  32. //        如果当前opt的selected属性有效
  33. if(opts[i].selected){
  34. //        将unselArr中i位置的元素删除,用变量delete接住,
  35. //      取delete中第0个元素,追加到selArr中
  36. selArr.push(unselArr.splice(i,1)[0]);
  37. }
  38. }
  39. break;
  40. case "<":
  41.             //获取unsel中所有option,保存在变量opts
  42.     var opts=this.sel.getElementsByTagName("option");
  43. //从后向前遍历opts
  44. for(var i=opts.length-1;i>=0;i--){
  45.      //   如果当前option被选中
  46.    if(opts[i].selected){
  47.      //从selArr中删除相同位置的元素,同时将删除的元素压入unselArr中
  48. this.unselArr.push(this.selArr.splice(i,1));
  49.    }
  50.     }
  51. break;
  52. }//每次移动完,都要排序
  53. unselArr.sort();
  54. selArr.sort();
  55. show();
  56. }
  57. function show(){ //将每次移动后的两个数组join成html字符串,
  58. //放到对应sel元素的内容中
  59.     //找到id为unsel的元素,保存在变量unsel中
  60. var unsel=document.getElementById("unsel");
  61. if(unselArr.length==0){//如果unselArr的长度为0
  62. unsel.innerHTML="";//就将unsel的内容设置为""
  63. }else{//否则:先拼unsel中的内容
  64. //将拼好的html放入,unsel中
  65. unsel.innerHTML=
  66. "<option>"+unselArr.join("</option><option>")+"</option>";
  67. }
  68. //找到id为sel的元素,保存在变量sel中
  69. var sel=document.getElementById("sel");
  70. if(selArr.length==0){//如果selArr的长度为0
  71. sel.innerHTML="";//就将sel的内容设置为""
  72. }else{//否则:先拼sel中的内容
  73. //        将拼好的html放入,sel中
  74. sel.innerHTML=
  75. "<option>"+selArr.join("</option><option>")+"</option>";
  76. }
  77. }
复制葡京赌场网站

下面是页面效果:
    图片6.png
点击 >> 后:
   图片7.png      
点击 << :
    图片8.png   
选择 中国,点击 > :
    图片9.png      
再选择 中国,点击 < :
    图片10.png      
上面练习中,需要注意的问题:
            1. option元素,selected属性表示是否被选中
                                      可当做bool类型用
            2. 遍历过程中可能减少元素个数时,都要从后向前遍历

  2. textContent : 获取或设置开始标签到结束标签之间的文本内容
                        剔除了子标签,自动转换特殊符号为原文
         IE8则换位innerText

回复

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 22:03:40 | 显示全部楼层
it is good news!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 23:37:31 | 显示全部楼层
感谢楼主发这么好的源码
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 23:57:23 | 显示全部楼层
我想要看看
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-8 00:08:07 | 显示全部楼层
我在找这个,可是不知道怎么弄 烦恼
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-8 00:10:58 | 显示全部楼层
看下能不能拿来运营
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

30

积分

等待验证会员

积分
30
发表于 2018-12-31 14:25:56 | 显示全部楼层
31074635160101.png

31074745000673.png


31074855999493.png


31075006613533.png


31075110490009.png



32225669_201812271605190106856459.jpg


回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]