黑马软件工程师_DOM编程实例

黑马程序员__DOM编程实例

---------------------- android培训、java培训、期待与您交流！ ----------------------

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">

<head>

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

function changeSize(className)

{

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

newsNode.className=className;

}

</script>

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>

滚滚长江东逝水<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">

<head>

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

function list()

{

var dtNode=event.srcElement;

var dlNode=dtNode.parentNode;

if(dlNode.className=="open")

{

dlNode.className="close";

}

else

{

dlNode.className="open";

}

</script>

.open{

overflow:visible;

}

.close{

overflow:hidden;

}

dl{

overflow:hidden;

height:16px;

}

</style>

</head>

<body>

<dl>

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

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

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

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

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

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

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

</dl>

<dl>

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

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

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

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

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

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

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

</dl>

<dl>

<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>

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

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>

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>

</div>

<td>

</tr>

<tr>

<td>

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

<div>

我们都是好朋友<br>

</div>

<td>

</tr>

<tr>

<td>

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

<div>

我们都是好朋友<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>

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

<style>

table{

border:#006699 1px solid;

width:600px;

}

table tr,td{

border:#009999 1px solid;

text-align:center;

}

</style>

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>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

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

<html>

<head>

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

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>

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].onmouseover=function()

{

name=this.className;

this.className="over";

}

trs[x].onmouseout=function()

{

this.className=name;

}

window.onload=trcolor;

</script>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

---------------------- android培训、java培训、期待与您交流！ ----------------------详细请查看：http://edu.csdn.net/heima

黑马软件工程师_DOM编程实例

热点推荐