12-关于DOM操作的相关案例

 

1.模态框案例

需求：

打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             html,body{
  12.                 height: 100%;
  13.             }
  14.             #box{
  15.                 width: 100%;
  16.                 height: 100%;
  17.                 background: rgba(0,0,0,.3);
  18.             }
  19.             #content{
  20.                 position: relative;
  21.                 top: 150px;
  22.                 width: 400px;
  23.                 height: 200px;
  24.                 line-height: 200px;
  25.                 text-align: center;
  26.                 color: red;
  27.                 background-color: #fff;
  28.                 margin: auto;
  29.             }
  30.             #span1{
  31.                 position: absolute;
  32.                 background-color: red;
  33.                 top: 0;
  34.                 right: 0;
  35.                 width: 30px;
  36.                 height: 30px;
  37.                 line-height: 30px;
  38.                 text-align: center;
  39.                 color: #fff;
  40.  
  41.             }
  42.         </style>
  43.     </head>
  44.     <body>
  45.         <button id="btn">弹出</button>
  46.     </body>
  47.     <script type="text/javascript">
  48.         //获取dom元素 1.获取事件源
  49.         var oBtn = document.getElementById('btn');
  50.         //创建弹出模态框的相关DOM对象
  51.         var oDiv = document.createElement('div');
  52.         var oP = document.createElement('p');
  53.         var oSpan = document.createElement('span');
  54.  
  55.         // 设置属性
  56.         oDiv.id = 'box';
  57.         oP.id = 'content'
  58.         oP.innerHTML = '模态框成功弹出'
  59.         oSpan.innerHTML = 'X';
  60.         oSpan.id = 'span1'
  61.  
  62.         // 追加元素
  63.         oDiv.appendChild(oP);
  64.         oP.appendChild(oSpan);
  65.  
  66.         // 点击弹出按钮 弹出模态框
  67.         oBtn.onclick = function(){
  68.             //动态的添加到body中一个div
  69.             this.parentNode.insertBefore(oDiv,oBtn)
  70.  
  71.         }
  72.         // 点击X 关闭模态框
  73.         oSpan.onclick = function(){
  74.             // 移除oDiv元素
  75.             oDiv.parentNode.removeChild(oDiv)
  76.         }   
  77.  
  78.     </script>
  79. </html>

2.简易留言板

需求：

当在textarea中输入内容，点击留言按钮，会添加到浏览器中

图如下：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>留言板</title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             .close{
  12.                 display: inline-block;
  13.                 width: 20px;
  14.                 height: 20px;
  15.                 line-height: 20px;
  16.                 text-align: center;
  17.                 cursor: pointer;
  18.                 background-color: rgba(0,0,0,.1);
  19.                 margin-left: 20px;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <h1>简易留言板</h1>
  25.         <div id="box">
  26.             <!--<ul>
  27.  
  28.             </ul>-->
  29.  
  30.         </div>
  31.         <textarea id="msg"></textarea>
  32.         <input type="button" id="btn" value="留言"/>
  33.         <button onclick="sum()">统计</button>
  34.     </body>
  35.     <script type="text/javascript">
  36.  
  37.         // 0 将ul标签添加到div#box标签中
  38.         var oUl = document.createElement('ul');
  39.         var oBox = document.getElementById('box');
  40.         oBox.appendChild(oUl);
  41.  
  42.         var oBtn = document.getElementById('btn');
  43.         var oMsg = document.getElementById('msg')
  44.         // 控制留言的总数量
  45.         var count = 0;
  46.         oBtn.onclick = function(){
  47.  
  48.             // 点击留言按钮事件操作
  49.             // 1.创建li标签
  50.             var oLi = document.createElement('li');
  51.             //2.设置内容
  52.             oLi.innerHTML = oMsg.value + "<span class='close'>X</span>"
  53.  
  54.             // 3.如果想在插入的第一个li获取的前面继续添加li标签
  55.             //3.1获取li标签
  56.             var olis = document.getElementsByTagName('li');
  57.              //3.2 如果是第一次添加的li标签，则直接添加到ul的后面
  58.             if(olis.length == 0){
  59.                 oUl.appendChild(oLi);
  60.                 count++;
  61.  
  62.             }else{
  63.                 // 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
  64.                 oUl.insertBefore(oLi,olis[0]);
  65.                 count++;
  66.             }
  67.             // 4.添加完成之后 清空textarea的值
  68.             oMsg.value = '';
  69.  
  70.             // 5.点击X的时候删除当前的一条数据
  71.             //5.1先获取所有的X
  72.             var oSpans = document.getElementsByTagName('span');
  73.  
  74.             // 5.2for循环 对所有的X添加点击事件
  75.             for(var i = 0; i< oSpans.length; i++){
  76.                 oSpans[i].onclick  = function(){
  77.                     // 5.3 移除当前的li标签
  78.                     oUl.removeChild(this.parentNode)
  79.                     count--;
  80.                 }
  81.             }
  82.  
  83.         }
  84.  
  85.         function sum(){
  86.             alert('一共发布了'+count+'条留言');
  87.  
  88.         }
  89.     </script>
  90. </html>

3.使用js模拟选择器中hover

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         button {
  8.             margin: 10px;
  9.             width: 100px;
  10.             height: 40px;
  11.             cursor: pointer;
  12.         }
  13.         .current {
  14.             background-color: red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <button>按钮1</button>
  20. <button>按钮2</button>
  21. <button>按钮3</button>
  22. <button>按钮4</button>
  23. <button>按钮5</button>
  24.  
  25. <script>
  26.     //需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
  27.  
  28.     var btnArr = document.getElementsByTagName("button");
  29.     //绑定事件
  30.     for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
  31.         btnArr[i].onmouseover = function () {
  32.             //【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
  33.             //排他思想和for循环连用
  34.             for(var j=0;j<btnArr.length;j++){
  35.                 btnArr[j].className = "";
  36.             }
  37.             this.className = "current";  //【重要】核心代码
  38.         }
  39.     }
  40.  
  41.     //鼠标离开current时，还原背景色
  42.     for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
  43.         btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
  44.             this.className = "";
  45.         }
  46.     }
  47.  
  48. </script>
  49.  
  50. </body>
  51.  
  52. </html>

代码解释：

鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：

  1.             //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
  2.             //排他思想和for循环连用
  3.             for(var j=0;j<btnArr.length;j++){
  4.                 btnArr[j].className = "";
  5.             }
  6.             this.className = "current";

4.tab栏选项卡

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             ul{
  12.                 list-style: none;
  13.             }
  14.             #tab{
  15.                 width: 480px;
  16.                 margin: 20px auto;
  17.                 border: 1px solid red;
  18.             }
  19.             ul{
  20.                 width: 100%;
  21.                 overflow: hidden;
  22.             }
  23.             ul li{
  24.                 float: left;
  25.                 width: 160px;
  26.                 height: 60px;
  27.                 line-height: 60px;
  28.                 text-align: center;
  29.                 background-color: #cccccc;
  30.             }
  31.  
  32.             ul li a{
  33.                 text-decoration: none;
  34.                 color:black;
  35.             }
  36.             li.active{
  37.                 background-color: red;
  38.             }
  39.             p{
  40.                 display: none;
  41.                 height: 200px;
  42.                 text-align: center;
  43.                 line-height: 200px;
  44.                 background-color: red;
  45.             }
  46.             p.active{
  47.                 display: block;
  48.  
  49.             }
  50.  
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <div id="tab">
  55.             <ul>
  56.                 <li class="active">
  57.                     <a href="#">首页</a>
  58.                 </li>
  59.                 <li>
  60.                     <a href="#">新闻</a>
  61.                 </li>
  62.                 <li>
  63.                     <a href="#">图片</a>
  64.                 </li>
  65.             </ul>
  66.             <p class="active">首页内容</p>
  67.             <p>新闻内容</p>
  68.             <p>图片内容</p>
  69.  
  70.         </div>
  71.     </body>
  72.     <script type="text/javascript">
  73.         window.onload = function(){
  74.             // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
  75.                     //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。
  76.  
  77.             var tabli = document.getElementsByTagName('li');
  78.             var tabContent = document.getElementsByTagName('p')
  79.  
  80.             for(var i = 0; i < tabli.length; i++){
  81.                 // 绑定索引值（新增一个自定义属性：index属性）
  82.                 tabli[i].index  = i;
  83.                 tabli[i].onclick = function(){
  84.  
  85.                     // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
  86.                     for(var j = 0; j < tabli.length; j++){
  87.                         tabli[j].className = '';
  88.                         tabContent[j].className = '';
  89.                     }
  90.                     this.className = 'active'
  91.  
  92.                     tabContent[this.index].className = 'active';//【重要代码】
  93.                 }
  94.         }
  95.         }
  96.  
  97.     </script>
  98. </html>

5、购物车案例

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .box{
  12.             width: 500px;
  13.             height: 400px;
  14.             margin: 100px auto;
  15.             background-color: rgba(255,255,255,0.4);
  16.             position: relative;
  17.  
  18.         }
  19.         .car{
  20.             width: 150px;
  21.             height: 30px;
  22.             background-color: #fff;
  23.             padding-left: 30px;
  24.             position: absolute;
  25.             left: 130px;
  26.             top: 3px;
  27.             z-index: 3;
  28.             border: 1px solid green;
  29.  
  30.         }
  31.         .shop{
  32.             width: 310px;
  33.             height: 70px;
  34.             background-color: #fff;
  35.             position: absolute;
  36.             top:33px;
  37.             left: 0;
  38.             display: none;
  39.  
  40.         }
  41.         div.c{
  42.  
  43.             border-bottom-width: 0;
  44.  
  45.         }
  46.         div.t{
  47.             border:  1px solid green;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <div class="box">
  53.         <div class="car" id="myCar">我的购物车</div>
  54.         <div class="shop t" id="shop"></div>
  55.     </div>
  56.     <script type="text/javascript">
  57.         var myCar =  document.getElementById('myCar');
  58.         var shop  = document.getElementById('shop');
  59.         myCar.onmouseover = function(){
  60.             shop.style.display = 'block';
  61.             myCar.className +=' c';
  62.         }
  63.         myCar.onmouseout = function(){
  64.             shop.style.display = 'none';
  65.             myCar.removeAttribute('class');
  66.             myCar.className = 'car';
  67.         }
  68.     </script>
  69. </body>
  70. </html>

作者：流浪者

日期：2019-09-06

12-DOM相关案例的更多相关文章

  1. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  2. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  3. 数据分析06 /pandas高级操作相关案例：人口案例分析、2012美国大选献金项目数据分析

    数据分析06 /pandas高级操作相关案例:人口案例分析.2012美国大选献金项目数据分析 目录 数据分析06 /pandas高级操作相关案例:人口案例分析.2012美国大选献金项目数据分析 1. ...

  4. Jsoup代码解读之二-DOM相关对象

    Jsoup代码解读之二-DOM相关对象   之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多 ...

  5. DOM相关知识点

    内容待补充... DOM相关注意题目: DOM的最小组成单位叫做 //节点 Node DOM 有自己的国际标准,目前的通用版本是 //DOM 3 DOM 树的根节点 //HTML 元素 Element ...

  6. DOM相关知识总结

    DOM相关: 1.获取DOM元素 document.getElementById document.getElementsByName document.getElementsByTagName do ...

  7. 12 DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  8. 12-关于DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  9. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

随机推荐

  1. 防盗链测试01 - Jwplayer+Tengine2.3.1 mp4模块打造流媒体测试服务器

    最近有个想法,想做类似下面的视频URL验证: 1.URL Tag Validation 2.Special format of URL for preventing unauthorized usag ...

  2. 前端利器躬行记（3）——webpack基础

    webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CS ...

  3. 微擎 人人商城 导出excel表分析

    在 数据处理上 ,有很多时候需要导出excel表  来当报表, 等 ,  php  人人商城导出报表过程简单分析 在导出时候发现 ca('statistics.order.export'); 出于好奇 ...

  4. P1726 上白泽慧音 tarjan 模板

    P1726 上白泽慧音 这是一道用tarjan做的模板,要求找到有向图中最大的联通块. #include <algorithm> #include <iterator> #in ...

  5. HTML5 01. 布局、语义化标签、智能化表单、表单元素／标签／属性／事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  6. Erlang模块gen_fsm翻译

    模块摘要     通用有限状态机行为.   描述     用于实现有限状态机的行为模块.使用该模块实现的通用有限状态机进程(gen_fsm)将具有一组标准的接口函数,并包括用于跟踪和错误报告的功能.它 ...

  7. vsnprint参数和意义

    _vsnprintf(char *str, size_t size, const char *format, va_list ap) char *str [out],把生成的格式化的字符串存放在这里. ...

  8. 虚拟化（二）-VMware workstation

    https://www.cnblogs.com/zhrngM/p/9547945.html vmware workstation的最新版本是10.0.2.相信大家也都使用过,其中的简单的虚拟机的创建, ...

  9. Xpath定位和CssSelector定位的区别

    1.Xpath基本语法: (1)"/":从根节点选取,下级节点 (2)"//":任意节点选取 (3)"*":任意标签选取 (4)" ...

  10. vim编辑器的使用详解

    在Linux江湖,最常用到的编辑器非vim莫属,vim的功能很强大. 1.   vim简介 在Linux世界中,最长用到的而且功能比较强大的是Vim编辑器.Vim编辑器是在内存缓冲区中处理数据. vi ...