HTML | DOM输入周对象

在HTML和DOM中，输入元素（input element）是一种可以让用户在页面上输入数据的表单元素。输入元素可以是文本框、单选按钮、复选框等。通过获取输入元素的值，可以得到用户输入的数据。

根据ID获取输入元素

可以通过DOM的getElementById方法获取指定ID的元素，从而获取输入元素。

const inputElement = document.getElementById("myInput");

获取输入元素的值

可以通过value属性获取输入元素的值。

const inputElement = document.getElementById("myInput");
const inputValue = inputElement.value;

设置输入元素的值

可以通过value属性设置输入元素的值。

const inputElement = document.getElementById("myInput");
inputElement.value = "新的值";

获取选中的单选按钮和复选框

对于单选按钮和复选框，可以通过checked属性获取它们是否被选中。

<input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female

<input type="checkbox" name="hobby" value="reading" />Reading
<input type="checkbox" name="hobby" value="coding" />Coding
<input type="checkbox" name="hobby" value="gaming" />Gaming

const genderMaleRadioButton = document.getElementById("gender-male");
const isGenderMaleSelected = genderMaleRadioButton.checked;

const readingCheckbox = document.getElementById("hobby-reading");
const isReadingSelected = readingCheckbox.checked;

获取选中的选项

对于select元素，可以通过selectedIndex属性获取选中的选项的索引。

<select>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

const selectElement = document.querySelector("select");
const selectedIndex = selectElement.selectedIndex;

也可以通过value属性获取选中的选项的值。

const selectElement = document.querySelector("select");
const selectedValue = selectElement.value;