HTML | DOM 选择表单属性

在HTML中，表单元素是非常重要的，因为表单元素可以用于向服务器发送数据。在JavaScript中，我们可以使用Document Object Model（DOM）来选择表单元素，并操作其属性。

选择表单元素

我们可以使用以下方法来选择HTML表单元素：

1. getElementById()方法

   这个方法可以通过表单元素的id属性来获取表单元素的引用。例如：

   var element = document.getElementById("myForm");
   

2. getElementsByName()方法

   这个方法可以通过表单元素的name属性来获取表单元素的引用。例如：

   var elements = document.getElementsByName("username");
   

3. getElementsByTagName()方法

   这个方法可以通过表单元素的标签名来获取表单元素的引用。例如：

   var elements = document.getElementsByTagName("input");
   

4. querySelector()方法

   这个方法可以使用CSS选择器语法来获取表单元素的引用。例如：

   var element = document.querySelector("#myForm input[type='text']");
   

获取和设置表单属性

一旦我们选择了表单元素，就可以使用相应的属性来获取和设置表单属性。以下是一些常用属性的示例：

1. value属性

   这个属性可以用来获取或设置表单元素的值。例如：

   var input = document.getElementById("myInput");
   var value = input.value; // 获取输入框的值
   input.value = "Hello, World!"; // 设置输入框的值
   

2. checked属性

   这个属性可以用来获取或设置复选框和单选框的勾选状态。例如：

   var checkBox = document.getElementById("myCheckBox");
   var checked = checkBox.checked; // 获取复选框的勾选状态
   checkBox.checked = true; // 设置复选框为勾选状态
   

3. disabled属性

   这个属性可以用来获取或设置表单元素的禁用状态。例如：

   var input = document.getElementById("myInput");
   var disabled = input.disabled; // 获取输入框的禁用状态
   input.disabled = true; // 禁用输入框
   

总结

通过DOM，我们可以方便地选择表单元素，并使用属性来获取和设置表单属性。上述示例是一些常用的方法和属性，但不限于此。在实际工作中，我们可以根据需要选择更多的表单元素和属性来满足需求。