HTML | DOM 输入文本对象

在 HTML 页面中，我们经常需要与用户进行交互，其中输入文本是最常见的一种交互方式之一。HTML | DOM 提供了多种对象和方法来操作输入文本。

1. 输入文本对象

<input> 元素

<input> 元素是最常用的输入文本对象之一。它可以创建各种类型的输入字段，如文本框、密码框、复选框等。

<input type="text" id="myInput" value="默认文本">

上述代码创建了一个文本框对象，并设置了其 id 为 "myInput"。我们可以通过该 id 来获取该对象并进行操作。

2. 获取输入文本对象

使用 JavaScript，我们可以通过多种方法获取输入文本对象。

通过 id 获取输入文本对象

在 HTML 中，我们可以为输入文本对象设置 id 属性，利用该 id，我们可以使用 getElementById() 方法来获取该对象。

let myInput = document.getElementById("myInput");

上述代码将获取 id 为 "myInput" 的输入文本对象，并将其赋值给变量 myInput。

通过标签名获取输入文本对象

除了通过 id，我们还可以通过标签名来获取输入文本对象。

let inputs = document.getElementsByTagName("input");

上述代码将获取所有的 <input> 元素，并将其返回一个 HTMLCollection 对象。

通过类名获取输入文本对象

如果多个输入文本对象具有相同的类名，我们可以通过类名来获取这些对象。

let inputs = document.getElementsByClassName("myClass");

上述代码将获取所有类名为 "myClass" 的输入文本对象，并将其返回一个 HTMLCollection 对象。

3. 操作输入文本对象

一旦我们获取到输入文本对象，我们就可以对其进行各种操作。

获取和设置输入文本的值

let inputValue = myInput.value;  // 获取输入文本的值
myInput.value = "新的文本";     // 设置输入文本的值

上述代码演示了如何获取和设置输入文本的值。

监听输入事件

我们可以通过添加事件监听器来监听输入文本对象的输入事件，以便在用户输入文本时执行相关操作。

myInput.addEventListener("input", handleInput);

function handleInput(event) {
  console.log(event.target.value);  // 打印输入的文本
}

上述代码将在用户输入文本时触发 handleInput 函数，并打印输入的文本值。

结论

HTML | DOM 输入文本对象允许我们获取和操作输入文本的值，以及监听用户的输入事件。通过以上介绍，你现在应该对如何使用输入文本对象有了更清晰的了解。开始使用吧！