HTML DOM Hidden 对象
HTML DOM Hidden 对象
概述
Hidden对象提供了一个用于操作HTML元素（常用于表单元素）的属性和方法集合。这些属性和方法可以用来获取、设置或操作元素的相关属性或状态。Hidden对象是所有HTML元素的基类，它是DOM中的一个静态对象，并且与具体文档无关。通常我们使用hidden对象来处理表单元素的值或状态。
属性
hiddenElement.value
用于获取或设置表单元素的值。例如：
<input type="text" id="input1" value="hello">
<script>
var hiddenElement = document.getElementById("input1");
console.log(hiddenElement.value); //输出的结果为 "hello"
hiddenElement.value = "world";
console.log(hiddenElement.value); //输出的结果为 "world"
</script>
hiddenElement.checked
用于获取或设置表单元素的选中状态。例如：
<input type="checkbox" id="checkbox1" checked>
<script>
var hiddenElement = document.getElementById("checkbox1");
console.log(hiddenElement.checked) //输出的结果为 true
hiddenElement.checked = false;
console.log(hiddenElement.checked); //输出的结果为 false
</script>
hiddenElement.selected
用于获取或设置下拉列表选项的选中状态。例如：
<select id="select1">
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<script>
var hiddenElement = document.getElementById("select1");
console.log(hiddenElement.options[hiddenElement.selectedIndex].value); //输出的结果为 "A"
hiddenElement.options[1].selected = true;
console.log(hiddenElement.options[hiddenElement.selectedIndex].value); //输出的结果为 "B"
</script>
hiddenElement.disabled
用于获取或设置表单元素的禁用状态。例如：
<input type="text" id="input1">
<script>
var hiddenElement = document.getElementById("input1");
console.log(hiddenElement.disabled); //输出的结果为 false
hiddenElement.disabled = true;
console.log(hiddenElement.disabled); //输出的结果为 true
</script>
方法
hiddenElement.setAttribute(name, value)
用于设置HTML元素的属性值。例如：
<input type="text" id="input1" value="hello">
<script>
var hiddenElement = document.getElementById("input1");
hiddenElement.setAttribute("maxlength", "10");
</script>
hiddenElement.getAttribute(name)
用于获取HTML元素的属性值。例如：
<input type="text" id="input1" value="hello" maxlength="10">
<script>
var hiddenElement = document.getElementById("input1");
console.log(hiddenElement.getAttribute("value")); //输出的结果为 "hello"
console.log(hiddenElement.getAttribute("maxlength")); //输出的结果为 "10"
</script>
hiddenElement.removeAttribute(name)
用于移除HTML元素的属性。例如：
<input type="text" id="input1" value="hello" maxlength="10">
<script>
var hiddenElement = document.getElementById("input1");
hiddenElement.removeAttribute("maxlength");
</script>
hiddenElement.submit()
用于提交表单。例如：
<form action="https://example.com" method="get" id="form1">
<input type="text" name="username">
<input type="password" name="password">
</form>
<script>
var hiddenElement = document.getElementById("form1");
hiddenElement.submit();
</script>
hiddenElement.reset()
用于重置表单。例如：
<form action="https://example.com" method="get" id="form1">
<input type="text" name="username">
<input type="password" name="password">
</form>
<script>
var hiddenElement = document.getElementById("form1");
hiddenElement.reset();
</script>
总结
HTML DOM Hidden对象是一个非常实用的工具，它可以让我们轻松地处理表单元素的值或状态，通过设置属性和调用方法，我们可以快速地完成表单的提交、重置等操作。在实际开发中，Hidden对象也是非常常见的。