12-关于DOM操作的相关案例
程序员文章站
2023-11-18 19:18:46
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/2148190.html">
android实现下拉菜单三级联动 </a>
</p>
<p>
下一篇： <a href="/article/2148193.html">
编码神器Lombok，学会后开发效率至少提高一倍！ </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<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>
<li>
<a href="/article/1742360.html" target="_blank" title="Linux内核中关于字符串的相关操作">
<h2>
Linux内核中关于字符串的相关操作 </h2>
</a>
</li>
<li>
<a href="/article/1722547.html" target="_blank" title="12-关于DOM操作的相关案例">
<h2>
12-关于DOM操作的相关案例 </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>