从 Vanilla JavaScript 中的文本框获取值

在 web 应用程序中，用户常常会输入文本，这些文本可能是搜索关键词、评论、联系人信息等等。在 Vanilla JavaScript 中，文本框（Text Input）是一种常见的输入形式。在本文中，我们将介绍如何从文本框中获取输入值。

HTML 文本框

文本框用于在 HTML 文档中创建输入区域，用户可以在其中输入文本内容。HTML 中的文本框通过 <input> 元素来创建，其中 type 属性设为 "text" 表示创建文本类型的输入框。

<input type="text" id="myText" name="myText" value="Hello, World!" />

可以看到，上述代码中，我们创建了一个 id 为 "myText" 的文本框，初始值为 "Hello, World!"。

JavaScript 获取文本框值

获取文本框的值，需要使用到 JavaScript DOM。DOM（Document Object Model）是浏览器将 HTML 文档解析成树状结构的一种方式。可以使用 DOM API 来操作和访问 HTML 文档中的元素。

获取文本框的值，需要使用到 input 元素的 value 属性。value 属性包含了文本框中当前的值。可以通过以下代码获取文本框的值：

const myText = document.getElementById("myText").value;
console.log(myText); // 输出 "Hello, World!"

上述代码中，我们使用了 document.getElementById 方法来获取 id 为 "myText" 的元素，然后使用 value 属性获取文本框中的值并将其赋值给变量 myText。

JavaScript 更新文本框值

除了获取文本框的当前值，有时我们还需要更新文本框的值。可以通过更新 value 属性来实现。

document.getElementById("myText").value = "New Value";

上述代码中，我们将 id 为 "myText" 的文本框的值更新为 "New Value"。这将更改文本框中的当前值。

总结

这篇文章中，我们介绍了如何从 Vanilla JavaScript 中的文本框获取值。通过使用 DOM API，我们可以轻松地获取和更新文本框的值，这为 web 应用程序的开发提供了很大的便利。同时，我们也需要注意文本框的值可能包含用户输入的不合法数据，这需要在后续的处理中进行验证和过滤。