DWR Util.js 常用函数详解

"这篇文档是关于DWR框架中Util.js文件常用方法的整理，主要涵盖了元素操作和值获取的相关函数，适用于JavaScript开发人员在使用DWR进行Web开发时参考。" 在DWR（Direct Web Remoting）框架中，Util.js是一个非常实用的工具集，它提供了许多方便的函数来简化DOM操作和数据获取。以下是一些关键方法的详细说明： 1. **元素操作符**: `$()` 和 `byId()` - `$()` 函数等同于 `document.getElementById()`，用于根据ID获取DOM元素。这个方法在大部分情况下都很方便，但在IE6中，它也能替代 `document.getElementsByName()[0]`。然而，这并不是跨浏览器的标准做法，因为 `getElementsByName()` 返回的是一个NodeList集合，所以通常需要通过索引访问第一个元素。 - 示例错误用法： ```javascript // 这会导致异常，因为' $('test3")' 尝试获取的是ID，而非name属性。 var input = $('test3'); ``` - 如果元素的name属性被用于查找，而没有ID，`$()` 将无法找到元素。 2. **值获取**: `getValue()`, `getValues()`, `getText()` - `getValue(id)` 用于获取表单元素的值，针对不同的元素类型有不同的行为： - `text`, `button`, `file`, `hidden`, `password`: 返回 `value` 属性的值。 - `select`（多选）: 所有选中项的值以逗号分隔。 - `textarea`, `div`, `p`, `span`, `href`, `option`（非value）, `h1` 等: 返回元素内的文本内容。 - `checkbox`, `radio` (通过 `id`): 选中返回 `true`，未选中返回 `false`。 - `checkbox`, `radio` (通过 `name`): 返回选中的值，多选以逗号分隔。 - `getText(id)` 与 `getValue()` 相似，但对某些元素（如 `select`）返回 `text` 属性而非 `value`。 - `getValues(object)` 用于批量获取多个元素的值，可以接收一个包含ID-值键值对的对象或一个表单元素。它将表单元素的值填充到对象中，以对应ID为键，形成类似于Map的结构。 例如： ```javascript // 示例1: 单个元素值获取 var value = DWRUtil.getValue("inputId"); // 示例2: 多个元素值批量获取 var user = { userName: null, userPassword: null }; DWRUtil.getValues(user); // 或者 var user = DWRUtil.getValues({ userName: null, userPassword: null }); ``` 在这个例子中，`getValues()` 会将表单中与对象属性名相匹配的元素值填充到对象中。尽管可以为对象属性设置初始值，但在提交时，实际的表单值将覆盖这些初始值。 总结，DWR的Util.js提供了一套方便的API，使得在JavaScript中处理DOM元素和表单数据变得更加简单。通过理解并熟练使用这些方法，可以提高开发效率并减少代码中的错误。在实际应用中，务必注意浏览器兼容性和元素类型的差异，以便正确地获取和操作元素及它们的值。