表单元素的属性 · JavaScript

## 概述 value用于大部分表单元素的内容获取(option除外). type可以获取input标签的类型(输入框或复选框等). disabled 禁用属性. checked复选框选中属性. selected下拉菜单选中属性. ## 说明当html中的标签的属性,只有一个值的时候,它的属性值是布尔类型的.只有上面列的后三个. ``` <body> <input type="button" value="禁用" id="btn"> <input type="button" value="启用" id="btn1"> <input type="text" name="" id="txt"> <script> var btn = document.getElementById('btn'); btn.onclick = function () { txt = document.getElementById('txt'); txt.disabled = true; } var btn1 = document.getElementById('btn1'); btn1.onclick = function () { txt = document.getElementById('txt'); txt.value = 'hello'; } </script> ``` ## 浏览器打开后给所有input赋值,点击按钮获取所有值并用|分割. ``` <body> <input type="button" value="获取" id="btn"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <script> var inputs = document.getElementsByTagName('input'); for (let i = 0; i < inputs.length; i++) { if (inputs[i].type === 'text') { inputs[i].value = i; } } var btn = document.getElementById('btn'); var str = ''; btn.onclick = function () { for (let i = 0; i < inputs.length; i++) { if (inputs[i].type === 'text') { str += inputs[i].value + '|'; } } console.log(str.substr(str,str.length-1)); } </script> ``` 优化,因为字符串是不可变的.所以直接大量拼接很占用性能. ``` btn.onclick = function () { for (let i = 0; i < inputs.length; i++) { if (inputs[i].type === 'text') { arr.push(inputs[i].value) } } console.log(arr.join('|')); } ```