在JavaScript中，获取和更改文本框（`<input type="text">` 和 `<textarea>`）的值是一项基本操作。文本框通常用于用户输入数据，而JavaScript允许开发者动态地与这些输入交互，读取用户的数据或者根据需要修改显示的内容。本文将深入探讨如何使用JavaScript来实现这一功能。
获取文本框的值是通过`value`属性来完成的。例如，假设我们有一个ID为`txt1`的文本框，我们可以通过以下方式获取其值：
```javascript
var oTextbox1 = document.getElementById("txt1");
var valueOfTxt1 = oTextbox1.value;
```
这里的`getElementById`方法是用来找到页面上具有指定ID的元素，然后`value`属性就是用来获取该元素的当前值。
在提供的实例代码中，有两个文本框，一个是一行的`<input type="text">`，另一个是多行的`<textarea>`。一个`onclick`事件被绑定到一个按钮上，当点击按钮时，`getValues`函数会被调用，弹出警告框显示两个文本框的值：
```html
<input type="button" value="Get Values" onclick="getValues()" />
```
在`getValues`函数中，`value`属性被用来获取文本框的值，并用`alert`显示出来：
```javascript
function getValues() {
var oTextbox1 = document.getElementById("txt1");
var oTextbox2 = document.getElementById("txt2");
alert("The value of txt1 is " + oTextbox1.value + "\nThe value of txt2 is " + oTextbox2.value);
}
```
除了获取值，我们还可以利用`value`属性来改变文本框的值。例如，如果想将文本框的内容设置为特定的字符串，可以这样做：
```javascript
oTextbox1.value = "new value";
```
在提供的第三个实例中，`setValues`函数就是用来改变文本框的值：
```javascript
function setValues() {
var oTextbox1 = document.getElementById("txt1");
var oTextbox2 = document.getElementById("txt2");
oTextbox1.value = "first textbox";
oTextbox2.value = "second textbox";
}
```
在这个例子中，点击“Set Values”按钮，就会更新文本框的值。
此外，`value`属性的一个有用特性是它返回的是字符串类型，因此我们可以使用字符串的方法，如`length`属性来获取文本的长度：
```javascript
var lengthOfTxt1 = oTextbox1.value.length;
```
在第二个示例中，`getLengths`函数就演示了如何获取文本框内文本的字符数：
```javascript
function getLengths() {
var oTextbox1 = document.getElementById("txt1");
var oTextbox2 = document.getElementById("txt2");
alert("The length of txt1 is " + oTextbox1.value.length + "\nThe length of txt2 is " + oTextbox2.value.length);
}
```
通过这些基本操作，JavaScript使得开发者能够轻松地与网页上的文本框交互，无论是读取用户输入，还是根据程序逻辑改变显示的内容。理解并掌握这些基本的JavaScript DOM操作对于前端开发至关重要。
