获取 HTML 文本框中的值有五种方法：使用 .value 属性；使用 .getAttribute() 方法；使用 .innerHTML 属性（不推荐）；使用事件监听器；使用表单 API（ES6）。

获取 HTML 文本框中的值

获取 HTML 文本框中的值是一个常见任务，可以通过使用 JavaScript 来实现。以下是几种方法：

1. 使用 .value 属性

最简单的方法是使用 .value 属性。此属性返回文本框中输入的文本。

立即学习“前端免费学习笔记（深入）”；

const textbox = document.getElementById("my-textbox");
const value = textbox.value;

2. 使用 .getAttribute() 方法

getAttribute() 方法也可以用于获取 .value 属性的值。

const textbox = document.getElementById("my-textbox");
const value = textbox.getAttribute("value");

3. 使用 .innerHTML 属性（不推荐）

innerHTML 属性获取文本框中的内容，包括 HTML 代码。在大多数情况下，不应使用此方法，因为它可能会导致安全问题。

const textbox = document.getElementById("my-textbox");
const value = textbox.innerHTML;

4. 使用事件监听器

当文本框的值发生更改时，可以使用事件监听器来捕获该更改。最常用的事件是 "input" 事件。

const textbox = document.getElementById("my-textbox");

textbox.addEventListener("input", (event) => {
  const value = event.target.value;
});

5. 使用表单 API（ES6）

在 ES6 中，可以使用表单 API 轻松获取文本框的值。

const form = document.getElementById("my-form");
const value = form.elements["my-textbox"].value;

选择正确的方法

选择哪种方法取决于具体情况。.value 属性是最简单、最常用的方法。getAttribute() 方法与 .value 属性具有相同的功能，但可以用于获取其他属性的值。innerHTML 属性不推荐使用，除非需要获取文本框中的所有内容，包括 HTML 代码。事件监听器用于在值发生更改时执行自定义逻辑。表单 API 在 ES6 中提供了一个简洁的获取表单元素值的方法。