获取节点的两种方式：
1、通过event对象的srcElement属性；
2、通过事件源对象用this传入。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>收缩菜单 · 表单布局</title>
[removed]
function list(dtNode){
// var dtNode = event.srcElement;
var dlNode
在JavaScript实战中，创建一个收缩菜单表单布局是一项常见的任务，尤其在网页交互设计中。这个实例主要展示了如何利用JavaScript动态地控制HTML元素的显示与隐藏，实现菜单的展开和收缩效果。以下是对该实例中涉及知识点的详细解释：
1. **事件处理**：
- **事件源对象(event.target 或 event.srcElement)**：当事件触发时，`event` 对象会携带有关事件的信息，其中 `target` 属性（IE下为 `srcElement`）表示触发事件的元素。在这个例子中，用户点击 `dt` 元素时，事件处理函数 `list(this)` 会被调用，`this` 指向当前点击的 `dt` 元素。
2. **DOM操作**：
- **节点获取**：获取节点有多种方法，例如 `getElementsByTagName()`，它可以返回指定标签名的所有元素。在本例中，通过 `var dlNode = dtNode.parentNode;` 获取到 `dt` 的父节点 `dl`。
- **节点属性操作**：使用 `className` 属性来改变元素的CSS类，从而影响样式。例如，通过 `dlNode.className = "open"` 或 `dlNode.className = "close"` 来切换展开或关闭的状态。
3. **CSS样式**：
- **overflow 属性**：`overflow` 属性用于处理元素内容溢出的情况。在示例中，`.close` 类设置 `overflow: hidden` 使得超出高度的内容不显示，而 `.open` 类设置 `overflow: visible` 允许内容显示。
- **高度控制**：通过 `height` 属性控制元素的高度。在默认情况下，设置 `height: 18px` 使得未展开的 `dl` 只显示一行高度，而展开后，由于 `overflow: visible`，内容可以超出这个高度。
4. **事件传播**：
- 在这个例子中，虽然事件绑定在 `dt` 元素上，但由于事件冒泡（bubbling），事件会向上冒泡到父节点。因此，`list` 函数能够对 `dl` 进行操作，实现菜单的展开和收缩。
5. **遍历与条件判断**：
- 使用 `for` 循环遍历所有 `dl` 元素，通过 `if` 语句判断当前被点击的 `dt` 所在的 `dl` 是否已展开（`className == "open"`），并根据判断结果切换其状态。同时，其他 `dl` 元素的 `className` 设置为 `close`，以关闭它们。
6. **JavaScript 事件绑定**：
- 示例中，通过在 `dt` 元素上直接设置 `onclick` 属性，实现了事件监听。这种方式称为内联事件处理，但在实际开发中，通常推荐使用 `addEventListener` 或 `attachEvent`（IE8及以下版本）方法进行事件绑定，以提高代码可维护性和可扩展性。
总结来说，这个实例展示了JavaScript如何结合HTML和CSS实现动态的菜单表单布局。通过事件监听、DOM操作以及CSS样式控制，实现了点击标题时菜单的展开和收缩功能。在实际开发中，可以进一步优化代码结构，比如将事件处理函数分离出来，使用事件委托等技术，以提高代码复用性和性能。
