欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-11 19:41:01
12-关于DOM操作的相关案例 1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: < ......</div> <div class="content"> <h2>1.模态框案例</h2> <p>需求:</p> <p> 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击x的时候会关闭当前的模态框</p> <p>代码如下:</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> <pre class="brush: python;"><!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } #box{ width: 100%; height: 100%; background: rgba(0,0,0,.3); } #content{ position: relative; top: 150px; width: 400px; height: 200px; line-height: 200px; text-align: center; color: red; background-color: #fff; margin: auto; } #span1{ position: absolute; background-color: red; top: 0; right: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; } </style> </head> <body> <button id="btn">弹出</button> </body> <script type="text/javascript"> //获取dom元素 1.获取事件源 var obtn = document.getelementbyid('btn'); //创建弹出模态框的相关dom对象 var odiv = document.createelement('div'); var op = document.createelement('p'); var ospan = document.createelement('span'); // 设置属性 odiv.id = 'box'; op.id = 'content' op.innerhtml = '模态框成功弹出' ospan.innerhtml = 'x'; ospan.id = 'span1' // 追加元素 odiv.appendchild(op); op.appendchild(ospan); // 点击弹出按钮 弹出模态框 obtn.onclick = function(){ //动态的添加到body中一个div this.parentnode.insertbefore(odiv,obtn) } // 点击x 关闭模态框 ospan.onclick = function(){ // 移除odiv元素 odiv.parentnode.removechild(odiv) } </script> </html></pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> </div> <h2>2.简易留言板</h2> <p>需求:</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA5MDYvYl8wXzIwMTkwOTA2MTkwODIzOTQ0OC5wbmc=" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></p> <p>当在textarea中输入内容,点击留言按钮,会添加到浏览器中</p> <p>图如下:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA5MDYvYl8wXzIwMTkwOTA2MTkwODI0Mzk5Mi5qcGc=" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></p> <p>代码如下:</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> <pre class="brush: python;"><!doctype html> <html> <head> <meta charset="utf-8"> <title>留言板</title> <style type="text/css"> *{ padding: 0; margin: 0; } .close{ display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; background-color: rgba(0,0,0,.1); margin-left: 20px; } </style> </head> <body> <h1>简易留言板</h1> <div id="box"> <!--<ul> </ul>--> </div> <textarea id="msg"></textarea> <input type="button" id="btn" value="留言"/> <button onclick="sum()">统计</button> </body> <script type="text/javascript"> // 0 将ul标签添加到div#box标签中 var oul = document.createelement('ul'); var obox = document.getelementbyid('box'); obox.appendchild(oul); var obtn = document.getelementbyid('btn'); var omsg = document.getelementbyid('msg') // 控制留言的总数量 var count = 0; obtn.onclick = function(){ // 点击留言按钮事件操作 // 1.创建li标签 var oli = document.createelement('li'); //2.设置内容 oli.innerhtml = omsg.value + "<span class='close'>x</span>" // 3.如果想在插入的第一个li获取的前面继续添加li标签 //3.1获取li标签 var olis = document.getelementsbytagname('li'); //3.2 如果是第一次添加的li标签,则直接添加到ul的后面 if(olis.length == 0){ oul.appendchild(oli); count++; }else{ // 3.3 如果不是第一次添加的li标签,则插入到第一个li标签的前面 oul.insertbefore(oli,olis[0]); count++; } // 4.添加完成之后 清空textarea的值 omsg.value = ''; // 5.点击x的时候删除当前的一条数据 //5.1先获取所有的x var ospans = document.getelementsbytagname('span'); // 5.2for循环 对所有的x添加点击事件 for(var i = 0; i< ospans.length; i++){ ospans[i].onclick = function(){ // 5.3 移除当前的li标签 oul.removechild(this.parentnode) count--; } } } function sum(){ alert('一共发布了'+count+'条留言'); } </script> </html></pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> </div> <p> </p> <h2>3.使用js模拟选择器中hover</h2> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> <pre class="brush: python;"><!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <style> button { margin: 10px; width: 100px; height: 40px; cursor: pointer; } .current { background-color: red; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //需求:鼠标放到哪个button上,改button变成黄色背景(添加类) var btnarr = document.getelementsbytagname("button"); //绑定事件 for(var i=0;i<btnarr.length;i++){ //要为每一个按钮绑定事件,所以用到了for循环 btnarr[i].onmouseover = function () { //【重要】排他思想:先把所有按钮的classname设置为空,然后把我(this)这个按钮的classname设置为current //排他思想和for循环连用 for(var j=0;j<btnarr.length;j++){ btnarr[j].classname = ""; } this.classname = "current"; //【重要】核心代码 } } //鼠标离开current时,还原背景色 for(var i=0;i<btnarr.length;i++){ //要为每一个按钮绑定事件,所以用到了for循环 btnarr[i].onmouseout = function () { //鼠标离开任何一个按钮时,就把按钮的背景色还原 this.classname = ""; } } </script> </body><br><br> </html></pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> </div> <p>代码解释:</p> <p>鼠标悬停时,current栏变色,这里用到了排他思想:先把所有按钮的classname设置为空,然后把我(this)这个按钮的classname设置为current,就可以达到变色的效果。核心代码是:</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> <pre class="brush: python;"> //排他思想:先把所有按钮的classname设置为空,然后把我(this)这个按钮的classname设置为current //排他思想和for循环连用 for(var j=0;j<btnarr.length;j++){ btnarr[j].classname = ""; } this.classname = "current";</pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> </div> <h2>4.tab栏选项卡</h2> <p>代码如下:</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> <pre class="brush: python;"><!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #tab{ width: 480px; margin: 20px auto; border: 1px solid red; } ul{ width: 100%; overflow: hidden; } ul li{ float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a{ text-decoration: none; color:black; } li.active{ background-color: red; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: red; } p.active{ display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"> <a href="#">首页</a> </li> <li> <a href="#">新闻</a> </li> <li> <a href="#">图片</a> </li> </ul> <p class="active">首页内容</p> <p>新闻内容</p> <p>图片内容</p> </div> </body> <script type="text/javascript"> window.onload = function(){ // //需求:鼠标放到上面的li上,li本身变色(添加类),对应的p也显示出来(添加类); //思路:1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 var tabli = document.getelementsbytagname('li'); var tabcontent = document.getelementsbytagname('p') for(var i = 0; i < tabli.length; i++){ // 绑定索引值(新增一个自定义属性:index属性) tabli[i].index = i; tabli[i].onclick = function(){ // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想) for(var j = 0; j < tabli.length; j++){ tabli[j].classname = ''; tabcontent[j].classname = ''; } this.classname = 'active' tabcontent[this.index].classname = 'active';//【重要代码】 } } } </script> </html></pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> </div> <h2> 5、购物车案例</h2> <p>代码如下:</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> <pre class="brush: python;"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 500px; height: 400px; margin: 100px auto; background-color: rgba(255,255,255,0.4); position: relative; } .car{ width: 150px; height: 30px; background-color: #fff; padding-left: 30px; position: absolute; left: 130px; top: 3px; z-index: 3; border: 1px solid green; } .shop{ width: 310px; height: 70px; background-color: #fff; position: absolute; top:33px; left: 0; display: none; } div.c{ border-bottom-width: 0; } div.t{ border: 1px solid green; } </style> </head> <body> <div class="box"> <div class="car" id="mycar">我的购物车</div> <div class="shop t" id="shop"></div> </div> <script type="text/javascript"> var mycar = document.getelementbyid('mycar'); var shop = document.getelementbyid('shop'); mycar.onmouseover = function(){ shop.style.display = 'block'; mycar.classname +=' c'; } mycar.onmouseout = function(){ shop.style.display = 'none'; mycar.removeattribute('class'); mycar.classname = 'car'; } </script> </body> </html></pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MDcwMy9iXzFfMjAxNzA3MDMwOTI2Mjc1MDY0LmpwZw==" alt="12-关于DOM操作的相关案例" title="12-关于DOM操作的相关案例"></a></span></div> </div> <p> </p> <p> </p> <p> </p> <p><span style="font-family: 隶书; font-size: 14pt;">作者:流浪者</span></p> <p><span style="font-family: 隶书; font-size: 14pt;">日期:2019-09-06</span></p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/1722546.html"> 产妇甲鱼汤应该怎么做好吃 </a> </p> <p> 下一篇: <a href="/article/1722548.html"> android ListActivity显示图标实例 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2246277.html" target="_blank" title="JavaScript关于select的相关操作说明"> <h2> JavaScript关于select的相关操作说明 </h2> </a> </li> <li> <a href="/article/2232134.html" target="_blank" title="SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)"> <h2> SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码) </h2> </a> </li> <li> <a href="/article/2188354.html" target="_blank" title="举例讲解JavaScript中关于对象操作的相关知识"> <h2> 举例讲解JavaScript中关于对象操作的相关知识 </h2> </a> </li> <li> <a href="/article/2188020.html" target="_blank" title="JavaScript关于select的相关操作说明"> <h2> JavaScript关于select的相关操作说明 </h2> </a> </li> <li> <a href="/article/2148191.html" target="_blank" title="12-关于DOM操作的相关案例"> <h2> 12-关于DOM操作的相关案例 </h2> </a> </li> <li> <a href="/article/2086213.html" target="_blank" title="SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)"> <h2> SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码) </h2> </a> </li> <li> <a href="/article/1979535.html" target="_blank" title="Web API---DOM---元素相关的操作方法"> <h2> Web API---DOM---元素相关的操作方法 </h2> </a> </li> <li> <a href="/article/1967290.html" target="_blank" title="10-关于DOM的事件操作"> <h2> 10-关于DOM的事件操作 </h2> </a> </li> <li> <a href="/article/1890986.html" target="_blank" title="JavaScript的Polymer框架中dom-repeat与VM的相关操作"> <h2> JavaScript的Polymer框架中dom-repeat与VM的相关操作 </h2> </a> </li> <li> <a href="/article/1877739.html" target="_blank" title="举例讲解JavaScript中关于对象操作的相关知识"> <h2> 举例讲解JavaScript中关于对象操作的相关知识 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>