JavaScript 中的 value() 方法94

概述

在 JavaScript 中，value() 方法返回一个 DOM 元素的值，例如输入框中的文本或下拉列表中选定的选项的值。该方法适用于具有 value 属性的 HTML 元素，例如 input、textarea 和 select 元素。

语法

;

其中 element 是具有 value 属性的 DOM 元素。

返回值

value() 方法返回一个字符串，表示元素的值。对于 input 和 textarea 元素，它返回文本内容。对于 select 元素，它返回选定的选项的值。

用法

value() 方法广泛用于以下场景：
获取用户在表单输入中的输入。
设置表单元素的值（仅适用于可编辑元素）。
动态更新元素的显示值。
进行数据验证和处理。

获取元素值

要获取元素的值，只需使用点运算符 (.) 访问 value 属性，如下所示：
const inputValue = ('input').value;

设置元素值

对于可编辑元素（例如 input 和 textarea），value() 方法也可以用于设置元素的值，如下所示：
('input').value = 'Hello World';

动态更新元素值

value() 方法可以结合事件监听器使用，以动态更新元素的值。例如，可以通过键盘事件更新输入框的值：
const input = ('input');
('input', () => {
();
});

与 innerHTML 的区别

value() 方法与 innerHTML 属性不同。innerHTML 返回元素的 HTML 内容，而 value() 返回元素的值。这意味着对于 input 和 textarea 元素，innerHTML 将返回包含 HTML 标记的文本，而 value() 将返回纯文本。

示例

以下示例展示了如何使用 value() 方法：
<form>
<input type="text" id="name" value="John Doe" />
<button type="submit">Submit</button>
</form>
<script>
const form = ('form');
('submit', (event) => {
();
const name = ('#name').value;
(`Submitted name: ${name}`);
});
</script>

在上面的示例中，当用户提交表单时，会调用 value() 方法获取输入字段的值。然后将该值打印到控制台。

value() 方法是一个有用的工具，用于获取和设置具有 value 属性的 DOM 元素的值。它广泛用于获取用户输入、动态更新值以及进行数据验证和处理。

2024-12-13

上一篇：JavaScript 原型：深入理解对象继承机制

下一篇：禁用 JavaScript：保护隐私和提高页面性能