使用DOM模型将文档结点表现为对象，并定义了这些对象具有的方法和属性；CSS也可以作为结点的一个属性由Javascript进行控制。
效果图：
上述代码中上，菜单是通过dl标记来描述的。其中dt标记表示根结点，dd标记表示子结点。在样式结点<style>中定义了两个样式类expand和collapse,前者保持dl标记的正常状态，其大小由其中的内容决定；后者使用height:16px;overflow:hidden 告诉浏览器当标记的高度超过16像素时多余部分不显示。
在用户单击dl中的dt标记时，通过javascript来切换dl标记的样式类，从而实现菜单的折叠和展开的效果。为了引用dl标记，需要使用dom模型中所定义结点的parentNode属性来访问dt的父结点，即dl标记，从而能够对其进行样式类的切换。
从以上可以看得出,javascript充分发挥了其脚本语言特点，使用代码控制着DOM模型，CSS等技术的行为。
javascript 使用小技巧：
在上面的代码中，将判断语句写为：if("collapse"==dl.className).因为在javascript语言中。判等符号（==）和赋值符号（=）是不一样的，如果在条件语句中将号写为=会造成语法正确单逻辑错误。而这样的错误常常难以发觉。因此在进行变量和常量的判等时，可以将常量写在前面，这样如果把==写成=号，会产生语法错误，可以避免逻辑错误的难以查找性。
效果图：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
dl { background-color:#000;color:#fff;width:100px;}
dt { cursor:pointer;width:100%;background-color:#666;}
.expand { overflow:visible;}
.collapse { height:16px;overflow:hidden;}
//-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function toggleDl(dt){
var dl=dt.parentNode;
if("collapse"==dl.className)dl.className="expand";
else dl.className="collapse";
}
//-->
</script>
</head>
</ul>
<body>
<dl>
<dt onclick="toggleDl(this)">根结点</dt>
<dd>子结点1</dd>
<dd>子结点2</dd>
<dd>子结点3</dd>
<dd>子结点4</dd>
<dd>子结点5</dd>
</dl>
</body>
</html>
<html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
dl { background-color:#000;color:#fff;width:100px;}
dt { cursor:pointer;width:100%;background-color:#666;}
.expand { overflow:visible;}
.collapse { height:16px;overflow:hidden;}
//-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function toggleDl(dt){
var dl=dt.parentNode;
if("collapse"==dl.className)dl.className="expand";
else dl.className="collapse";
}
//-->
</script>
</head>
</ul>
<body>
<dl>
<dt onclick="toggleDl(this)">根结点</dt>
<dd>子结点1</dd>
<dd>子结点2</dd>
<dd>子结点3</dd>
<dd>子结点4</dd>
<dd>子结点5</dd>
</dl>
</body>
</html>
上述代码中上，菜单是通过dl标记来描述的。其中dt标记表示根结点，dd标记表示子结点。在样式结点<style>中定义了两个样式类expand和collapse,前者保持dl标记的正常状态，其大小由其中的内容决定；后者使用height:16px;overflow:hidden 告诉浏览器当标记的高度超过16像素时多余部分不显示。
在用户单击dl中的dt标记时，通过javascript来切换dl标记的样式类，从而实现菜单的折叠和展开的效果。为了引用dl标记，需要使用dom模型中所定义结点的parentNode属性来访问dt的父结点，即dl标记，从而能够对其进行样式类的切换。
从以上可以看得出,javascript充分发挥了其脚本语言特点，使用代码控制着DOM模型，CSS等技术的行为。
javascript 使用小技巧：
在上面的代码中，将判断语句写为：if("collapse"==dl.className).因为在javascript语言中。判等符号（==）和赋值符号（=）是不一样的，如果在条件语句中将号写为=会造成语法正确单逻辑错误。而这样的错误常常难以发觉。因此在进行变量和常量的判等时，可以将常量写在前面，这样如果把==写成=号，会产生语法错误，可以避免逻辑错误的难以查找性。
