DOM基础教程之使用DOM控制表单

下面是对“DOM基础教程之使用DOM控制表单”的详细讲解：

基础概念

DOM (Document Object Model) 是文档对象模型的缩写，它是一种描述 HTML 文档结构的方式，可以通过 JavaScript 代码来操作 HTML 页面。

表单是 HTML 中常见的一种交互方式，用户可以通过表单向服务器提交数据，表单中的各个元素都是可以使用 DOM 来进行控制的，包括文本框、复选框、下拉框等。

控制表单的基本步骤

使用 DOM 控制表单的基本步骤如下：

1. 通过 document.getElementById() 或 document.querySelector() 方法获取需要控制的表单元素对象；
2. 使用获取的表单元素对象的属性或方法来设置或获取相应的属性值或状态。

下面我们来看两个实际的例子。

示例1：设置文本框的初始值

以下是一个包含文本框的表单结构：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
</form>

我们可以使用 JavaScript 来设置文本框的初始值，代码如下：

var inputName = document.getElementById("name");
inputName.value = "张三";

代码中，我们先使用 document.getElementById() 获取输入框的元素对象，然后使用 .value 属性来设置文本框的初始值为 “张三”。

示例2：获取复选框的选中状态

以下是一个包含复选框的表单结构：

<form>
  <label for="check">同意协议：</label>
  <input type="checkbox" id="check" name="check">
</form>

我们可以使用 JavaScript 来获取复选框的选中状态，代码如下：

var checkBox = document.getElementById("check");
if (checkBox.checked) {
  alert("已选中");
} else {
  alert("未选中");
}

代码中，我们同样使用 document.getElementById() 获取复选框的元素对象，然后使用 .checked 属性来获取复选框的选中状态。

结束语

以上就是使用 DOM 控制表单的基本步骤和两个实例，希望能够对你有所帮助。