DOM编程实例

最新推荐文章于 2023-12-07 19:40:15 发布
最新推荐文章于 2023-12-07 19:40:15 发布
阅读量1.7k 收藏
点赞数 2
分类专栏： javascript 文章标签： 编程 javascript border html table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianjian4592/article/details/7795851
版权


 

DOM编程步骤：

1、 定义数据封装的标签（定义界面，通过html将数据封装）

2、 定义一些静态的样式（通过css）

3、 确定事件源

4、 注册事件

5、 事件处理

注：在处理过程中需要明确被处理的区域

 

动态改变字体的大小、颜色、背景属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<!-- TemplateBeginEditable name="doctitle" -->

<title>动态改变文字</title>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

 

<script>

function changeSize(className)

{

       var newsNode=document.getElementById("divid");

       newsNode.className=className;

}

</script>

<style type="text/css">

div,.norm

{

       background-color:#CCCCCC;

       color:#0000FF;

       font-size:16px;

       width:500px;

}

.max

{

       background-color:#00FF99;

       color:#FF3333;

       font-size:24px;

       width:500px;

}

.min

{

       background-color:#FFFF66;

       color:#000000;

       font-size:10px;

       width:500px;

}

</style>

</head>

 

<body>

<h2>新闻标题</h2>

<a href="javascript:void(0)"οnclick="changeSize('max')">大</a>

<a href="javascript:void(0)"οnclick="changeSize('norm')">中</a>

<a href="javascript:void(0)"οnclick="changeSize('min')">小</a><br/>

<div id="divid" class="norm">

滚滚长江东逝水<br/>

浪花淘尽英雄<br/>

是非成败转头空<br/>

青山依旧在<br/>

几度夕阳红<br/>

白发渔樵江渚上<br/>

惯看秋月春风<br/>

一壶浊酒喜相逢<br/>

古今多少事<br/>

都付笑谈中<br/>

</div>

</body>

</html>

展开闭合效果：

 

获取时间源对象的两种方式：

1、  通过event对象的srcElement属性

2、  将事件源对象通过this传入

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<!-- TemplateBeginEditable name="doctitle" -->

<title>展开闭合效果</title>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

<script type="text/javascript">

       function list()

       {

              var dtNode=event.srcElement;

              var dlNode=dtNode.parentNode;

              if(dlNode.className=="open")

              {

                     dlNode.className="close";

                    

              }

              else

              {

                     dlNode.className="open";

              }

       }

</script>

<style type="text/css">

.open{

       overflow:visible;

       }

.close{

       overflow:hidden;

       }

dl{

       overflow:hidden;

       height:16px;

       }           

</style>

</head>

 

<body>

              <dl>

                     <dt οnclick="list()">古诗词</dt>

                    

                     <dd>滚滚长江东逝水</dd>

                     <dd>浪花淘尽英雄</dd>

                     <dd>是非成败转头空</dd>

                     <dd>青山依旧在</dd>

                     <dd>几度夕阳红</dd>

                     <dd>白发渔樵江渚上</dd>

                     <dd>惯看秋月春风</dd>

                    

              </dl>

              <dl>

                     <dt οnclick="list()">古诗词</dt>

                     <dd>滚滚长江东逝水</dd>

                     <dd>浪花淘尽英雄</dd>

                     <dd>是非成败转头空</dd>

                     <dd>青山依旧在</dd>

                     <dd>几度夕阳红</dd>

                     <dd>白发渔樵江渚上</dd>

                     <dd>惯看秋月春风</dd>

                    

              </dl>

              <dl>

                     <dt οnclick="list()">古诗词</dt>

                     <dd>滚滚长江东逝水</dd>

                     <dd>浪花淘尽英雄</dd>

                     <dd>是非成败转头空</dd>

                     <dd>青山依旧在</dd>

                     <dd>几度夕阳红</dd>

                     <dd>白发渔樵江渚上</dd>

                     <dd>惯看秋月春风</dd>

              </dl>

</body>

</html>

单个展开实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<style type="text/css">

table{

       border:#FF0000 1px solid;

       background-color:#00CC33;

       }

table td{

       border:#3300FF 1px solid;

       background-color:#33CCFF;

       }

table td div{

       background-color:#00CC99;

       display:none;

       }

.open{

       display:block;

       }

.close{

       display:none;

       }

</style>

<script type="text/javascript">

       function list2()

       {

              var aNode=event.srcElement;

              var tdNode=aNode.parentNode;

              var divNode=tdNode.getElementsByTagName("div")[0];

              var table=document.getElementsByTagName("table")[0];

              var divNodes=table.getElementsByTagName("div");

              for(var x=0;x<divNodes.length;x++)

              {

                     if(divNodes[x]==divNode)

                           

                                   {

                                          if(divNode.className=="open")

                                          {

                                                 divNode.className="close";

                                          }

                                          else

                                          {

                                                 divNode.className="open";

                                          }

                                   }

                            else divNodes[x].className="close";   

              }

       }    

</script>

</head>

<body>

<table>

       <tr>

              <td>

                     <a href="javascript:void(0)" onClick="list2()">好友菜单列表</a>

                     <div>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                     </div>    

              <td>

       </tr>

      

              <tr>

              <td>

                     <a href="javascript:void(0)" onClick="list2()">好友菜单列表</a>

                     <div>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                     </div>

              <td>

       </tr>

              <tr>

              <td>

                     <a href="javascript:void(0)" onClick="list2()">好友菜单列表</a>

                     <div>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                    我们都是好朋友<br>

                     </div>

              <td>

       </tr>

</table>

</body>

</html>

实现点击自动排序功能：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<style>

table{

       border:#006699 1px solid;    

       width:600px;

       }

table tr,td{

       border:#009999 1px solid;

       text-align:center;

      

}

</style>

<script>

       var flag=true;

       function sorttab()

       {

              //1、获取表格中所有的行对象

              var tabNode=document.getElementsByTagName("table")[0];

              var trs=tabNode.rows;

              //2、定义临时容器，将表格中需要参与排序的行对象临时存储

              var arr=new Array();

              for(var x=1;x<trs.length;x++)

              {

                     arr[x-1]=trs[x];

              }

              for(var x=0;x<arr.length;x++)

              {

                     for(var y=x+1;y<arr.length;y++)

                     {

                            if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))

                            {

                                   var temp=arr[x];

                                   arr[x]=arr[y];

                                   arr[y]=temp;

                            }

             

                     }

              }

              if(flag)

              {

                     for(var x=0;x<arr.length;x++)

                     {

                            document.getElementsByTagName("tbody")[0].appendChild(arr[x]);

                     }

                     flag=false;

              }

              else

              {

                     for(var x=arr.length-1;x>=0;x--)

                     {

                            document.getElementsByTagName("tbody")[0].appendChild(arr[x]);

                     }

                     flag=true;

              }

       }

 

</script>

</head>

<body>

<table>

       <tr>

              <td>姓名</td>

              <td><a href="javascript:void(0)" onClick="sorttab()">年龄</a></td>

              <td>地址</td>

       </tr>

              <tr>

              <td>张三</td>

              <td>30</td>

              <td>北京</td>

       </tr>

              <tr>

              <td>李四</td>

              <td>34</td>

              <td>上海</td>

       </tr>

              <tr>

              <td>王五</td>

              <td>23</td>

              <td>广州</td>

       </tr>

       <tr>

              <td>赵六</td>

              <td>27</td>

              <td>南京</td>

       </tr>

       <tr>

              <td>周七</td>

              <td>25</td>

              <td>大连</td>

       </tr>

       <tr>

              <td>孙八</td>

              <td>29</td>

              <td>铁岭</td>

       </tr>

</table>

</body>

</html>

 

表格的行间隔显示和高亮效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<style type="text/css">

table{

       border:#006699 1px solid;    

       width:600px;

       }

table tr,td{

       border:#009999 1px solid;

       text-align:center;

}

.one

{

       background-color:#FFCC00;

}

.two

{

       background-color:#CCFF99;

}

.over

{

       background-color:#FF00FF;

}

 

</style>

<script type="text/javascript">

var name;

function trcolor()

{

       var tabNode=document.getElementsByTagName("table")[0];

       var trs=tabNode.rows;

      for(var x=1;x<trs.length;x++)

       {

              if(x%2==1)

                     trs[x].className="one";

              else

                     trs[x].className="two";

              trs[x].οnmοuseοver=function()

              {

                     name=this.className;

                     this.className="over";

              }

              trs[x].οnmοuseοut=function()

              {

                     this.className=name;

              }

       }

}

window.οnlοad=trcolor;

</script>

</head>

<body>

<table>

       <tr>

              <td>姓名</td>

              <td><a href="javascript:void(0)" onClick="trcolor()">年龄</a></td>

              <td>地址</td>

       </tr>

              <tr>

              <td>张三</td>

              <td>30</td>

              <td>北京</td>

       </tr>

              <tr>

              <td>李四</td>

              <td>34</td>

              <td>上海</td>

       </tr>

              <tr>

              <td>王五</td>

              <td>23</td>

              <td>广州</td>

       </tr>

       <tr>

              <td>赵六</td>

              <td>27</td>

              <td>南京</td>

       </tr>

       <tr>

              <td>周七</td>

              <td>25</td>

              <td>大连</td>

       </tr>

       <tr>

              <td>孙八</td>

              <td>29</td>

              <td>铁岭</td>

       </tr>

</table>

</body>

</html>


GAStudio
关注
专栏目录
很适用的DOM编程实例
09-16
超级不错的DOM编程手册 附带详细的例子
dom编程案例
01-09
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <exam> <student idcard="111" examid="222"> <name>张三</name> <location>沈阳</location> <grade>89</grade> </student> <student idcard="333" examid="444"> <name>李四</name> <location>大连</location> <grade>97</grade> </student> </exam>
DOM编程示例
promiseend的博客
12-25 309
新闻字体需求：新闻字体的大中小样式的改变 思路： 1.先有新闻数据，并用标签封装 2.定义一些页面样式 3.确定事件源和事件，以及处理方式中被处理的节点。 事件源:a标签 事件：onclick 被处理的节点 div newstext 既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果，可以使用href设置：javascript:void(0)来
DOM编程
weixin_33712987的博客
02-17 94
一、DOM简介        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。可以将每个HTML标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。选择器：document.getElementById('id')document.getElementsByNa...
韩顺平 javascript教学视频_学习笔记24_dom编程开山篇_dom编程实例（乌龟抓鸡）
郁孤台之魂
02-22 2310
dom编程开山篇 学习目的 明确dom编程的重要性初步认识dom编程 dom 的必要性：实际上 js 更重要的作用是可以让用户对网页元素进行交互操作，这才是学习 js 的精华之所在     看乌龟抓鸡这个案例：
javascript DOM编程实例(智播客学习)
10-29
文档中提到了具体的编程实例，包括二级连动下拉菜单和邮件列表功能的实现，这些实例展示了如何通过JavaScript来操作DOM。 - 二级连动下拉菜单实例： 这个例子中，当用户从省份下拉菜单中选择一个省份时，城市下拉...
Javascript DOM 编程实例讲解--仿LightBox效果提示框
03-01
JavaScript DOM编程是网页动态交互的核心技术，它允许我们通过脚本语言操纵HTML和CSS，实现网页元素...通过这个实例，你可以了解到JavaScript DOM编程在实现网页交互中的强大能力，并为今后的前端开发打下坚实的基础。
XML的DOM编程 实例
11-19
在“XML的DOM编程实例”中，我们主要探讨如何利用DOM解析XML文件，并进行读取、修改、创建和删除XML元素。这个实例包含了一个带有图形用户界面（GUI）的应用程序，使用户能够直观地与XML数据交互。下面将详细解释...
javascript,Dom编程,递归案例
一只苟延残喘的卑微蝼蚁
12-08 236
javascript,Dom编程,递归案例 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;javascript,Dom编程,递归案例,雪豹软件工作室&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href
DOM案例（详细源码版）
最新发布
qq_57162921的博客
12-07 539
DOM学习的常见案例
DOM的6个实例
weixin_40205005的博客
06-15 1538
第1个实例：循环单击变色&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;1111&lt;/h1&gt
DOM常见案例大盘点!
blog_pancc的博客
04-27 926
文章目录DOM案例一.DOM操作元素案例1.DOM修改元素内容案例2.分时问候案例3.仿京东显示隐藏密码明文案例4.仿淘宝关闭二维码案例5.遍历精灵图案例6.显示隐藏文本框内容案例7.密码框验证信息案例8.仿世纪佳缘用户名显示隐藏案例9.排他思想(算法)案例10.百度换肤案例11.表格隔行变色案例12.全选反选案例13.tab栏切换案例14.新浪下拉菜单案例15.简单版留言板案例16.动态生成表格案例二.DOM事件高级案例1.鼠标跟随案例2.仿京东按键输入内容案例3.仿京东快递查询单号案例 DOM案例 ​
[JavaScript] DOM编程-事件高级
qq_49900295的博客
03-11 929
一、注册事件 注册事件有两种方式：传统方式和方法监听注册方式 传统注册方式： 利用on开头的事件onclick <button onclick= "alert('hi~')” ></button> btn.onclick = function() { } 特点:注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 代码示例： 我们给传统注册事件按钮绑定了两个事件，那么在浏览器中会执行哪一个呢？ 这体现了传统注册方式的唯一性，同
javascript dom编程艺术网页案例
Agrass
12-04 2118
包含了五个页面，N多函数，完成工作有幻灯片，点击显示内容功能，图片库，表格优化，表单优化，我自己没有写最后表单的ajax 在博客上只放了 js 函数代码，是供自己温习，想要学习建议阅读书籍。 案例放在github，地址：https://github.com/UnaMaatin/javascript-dom
dom实例
TaoYuan
04-24 5825
更改一个链接的文本、URL 及target<html> <head><script type="text/javascript"> function changeLink(){ document.getElementById('myAnchor').innerHTML="访问我的主页"; document.getElementById('myAnchor').
javascript DOM编程艺术学习笔记（8）网站项目综合运用实例：
彬go的专栏
04-18 1473
在学习完这本后，在课后也提供了一个网站页面的综合实例开发
JavaScript DOM 编程艺术一书综合示例
watermelonbig的专栏
12-11 3689
在HTML页面结构中，常用到的几个区域是头部区域，使用header元素；导航区域，使用nav 元素；在内容区域可以使用article元素来展示每一页的内容。这些标签元素都是HTML5标签。在使用HTML5元素时，建议在文档的元素中包含Modernizer库，用来对浏览器是否支持H5标签进行检验。取得当前页面的URL，可以使用window.location
DOM操作经典案例
qq_41189709的博客
08-05 2073
DOM操作经典案例百度换肤案例鼠标移进移出变色（行变色）表单全选全取消案例tag导航栏切换案例 百度换肤案例 百度换肤案例就是当你点击一张图片时，当前的背景图片就为你所点击的这张图片，实现起来也比较简单，就是更改一下backgroundImage的url路径 js代码： <script> var img=document.querySelectorAll('img')...
DOMScripting：Web设计中的JavaScript与DOM编程
"JavaScript.DOM编程艺术.pdf - 一本由Jeremy Keith编著的关于JavaScript与DOM编程的书籍，旨在帮助读者掌握如何将行为与结构分离，使用无侵入式JavaScript，添加动态效果，并确保向后兼容性，通过优雅降级实现。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值