JavaScript-实例（实现展开效果）

DOM编程步骤：

1. 定义界面

通过html打开标签将数据进行封装

2.  定义一些静态的样式

通过CSS定义

3. 需要动态的完成和用户的交互

①  明确事件源

②  明确事件并将事件注册到事件源上

③  通过javascript的函数对象事件进行处理

④  在处理过程需要明确被处理的区域。

实例：展开闭合效果

方法介绍：

getElementByTagName(Stringstr),把节点名称传进去，返回document中所有的该名称的节点对象数组。

overflow： css样式的属性，功能：当该区域超过了规定的范围时，可以显示visible，隐藏hidden，或者auto和scroll。

需求一：通过单击，实现一个展开的闭合效果。

测试数据：

<span style="font-family: Arial, Helvetica, sans-serif;"><div  onclick="change()"></span><pre name="code" class="html"> 	大家快发啦付款
</div>

实现功能：

注:doctool是封装的js文件，里面有一些常用的函数方法，这样可以提高开发效率。

<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function change()
{
var divNode =byTag("div")[0];
//方法一：鼠标事件，单击字体调用本方法：展开闭合效果
var b=true;
if(b)
{
divNode.style.height="8px";
divNode.style.overflow="hidden";
b=false;

}
else
{
divNode.style.height="8px";
divNode.style.overflow="visible";
b=true;

}
}

方法一不是特别好，但也是一种处理方法，不如通过选择器来进行操作。

方法二：展开闭合效果

if(divNode.className=="close")
{
divNode.className ="open";

}
else
{
divNode.className="close";
//这是一个类选择器
}

定义选择器：

 

<style type="text/css">
.open{
height:16px;
overflow:visible;
}
.close{
height:16px;
overflow:hidden;
}

dl{
height:16px;
overflow:hidden;
}
</style>

展示的效果：



单击后：



需求二：通过单击上层项目，下层项目展示出来

测试数据：通过event对象是SRCElement属性

<dl>
<dt onclick="list1()">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>

<dl>
<dt onclick="list1()">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>

function list1(dtNode)
{
/*var dtNode = document.getElementsByTagName("dt")[0];
var dlNode = document.getElementsByTagName("dl")[0];
这种方式也可以，但是获得节点dt很多的时候，这样就太麻烦了。
*/
var dtNode =event.srcElement;
//拿到了dt之后，我需要确认当前dt所做的操作
var dlNode =dtNode.parentNode;
if(dlNode.className=="open")
{
dlNode.className ="close";

}
else
{
dlNode.className="open";

}
}

需求三:当单击一个项目时，其它项目都要关闭，只有一个项目打开。

 

测试数据：将事件源对象通过this传入。

<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>

<dl>
<dt onclick="list(this)">上层项目上层项目</dt>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
<dd>下层项目下层项目</dd>
</dl>

function list(dtNode)
{
var dlNode =dtNode.parentNode; //得到dt节点对象的父节点dl
var dlNodes=byTag("dl"); //获取所有的dl标签
for(var x=0;x<dlNodes.length;x++)
{
if(dlNodes[x]==dlNode)
{
if(dlNode.className=="open")
{
dlNode.className ="close";

}
else
{
dlNode.className="open";
}

}
else
dlNodes[x].className ="close";

}
}