1、获取页面所有表单元素:document.forms
使用document.forms返回的是一个HTMLCollection数组,数组的元素是form,有多少个form就有多少个元素,每个元素是一个类数组,其中包含了当前表单中的所有元素及其对应的属性。
<form> <input type="text" /> <input type="password" /> <input type="button" /> <input type="date" /> </form> <script type="text/javascript"> let formAll = document.forms; console.log(formAll); //HTMLCollection数组,数组中有一个form,form中包含了所有的写的标签及其属性 </script>2、通过获取节点方式获取表单元素:通过js获取节点的标准方法比如document.getElementById、document.getElementsByClassName等
<form> <input type="text" id="text" /> <input type="password" class="pwd" /> <input type="button" /> <input type="date" /> </form> <script type="text/javascript"> let text = document.getElementById('text'); let pwd = document.getElementsByClassName('pwd')[0]; let input = document.querySelectorAll('input'); </script>注意: 在使用document.querySelector方法获取表单元素时,如果不是通过id、class、元素关系等获取,而是直接通过元素的type属性来获取时,要指明type属性值:
<input type="radio" /> <input type="checkbox" /> <script type="text/javascript"> let radio = document.querySelector("input[type='radio']"); let checkbox = document.querySelector("input[type='checkbox']"); </script>1、表单的方法:
方法说明submit()表单提交reset()表单重置 <form > <input type="text" /> </form> <script type="text/javascript"> let form = document.querySelector('form'); let input = document.querySelector('input'); form.submit();//提交表单 form.reset();//重置表单 </script>2、表单中元素属性操作:
属性说明type可读可写,表示表单元素的类型,可以动态更改类型form只读属性,包含了该元素的form表单对象,不存在时返回nullname可读可写,表示元素的名称value可读可写,获取或设置表单元素的值 <form > <input type="text" name = "set" value="111"/> </form> <script type="text/javascript"> let input = document.querySelector('input'); console.log(input.type);//text input.type = 'password';//将input框改为密码框 console.log(input.form); //查看input元素是否有form包裹,有返回整个表单,没有返回null console.log(input.name);//获取input元素的name属性值 input.name = 'settime';//更改input元素的name属性值 console.log(input.value);//获取input元素的value属性值 input.value = '2222';//更改input元素的value属性值 </script>对于radio和checkbox:
radio和checkbox有一个checked属性,将checked设置值为’checked’,会让单选框或多选框选中
或者在设置checked属性值时设置true或false,true表示选中,false代表不选中
<input type="radio" /> <input type="checkbox" /> <script type="text/javascript"> let radio = document.querySelector("input[type='radio']"); let checkbox = document.querySelector("input[type='checkbox']"); radio.checked = 'checked'; checkbox.checked = 'checked'; radio.checked = true; checkbox.checked = true </script>表单事件有两种:
提交submit
重置reset
<form> 用户:<input type="text" class="text" /> 密码:<input type="password" class="pwd" /> <input type="submit" value="提交" class="submit"/> <input type="reset" value="重置" class="reset"/> </form> <script type="text/javascript"> let form = document.querySelector('form'); let btnSubmit = document.getElementsByClassName('submit')[0]; let btnReset = document.getElementsByClassName('reset')[0]; let form = document.querySelector('form'); btnSubmit.onclick = function(){ form.onsubmit = function(){ console.log('提交'); } } btnReset.onclick = function(){ form.onreset = function(){ console.log('重置'); } } </script>首先了解一下select的属性和js可以操作select的方法和属性:
1、select自身的属性:
multiple: 设置select为多选
size: 当设置了multiple属性,一定要在设置了multiple属性后使用,通过size可以设置select固定可见行数;
disabled: 将select中某个option设置为不可选中状态;
name: 表单传输过程中的key值;
form: 指定select与表单关联的元素(id相同,一般使用较少,id一般是唯一的), 可以使得表单传输项位于DOM任意位置,而非一定要是表单元素的子元素
2、js操作select:
(1) select节点.options:
返回其所有option选项,类数组的HTMLOptionsCollection,
可通过selectNode[index]访问option元素
(2)select节点.selectedIndex:
可读可写,被选中的选项索引,下边从0开始
通过修改selectedIndex的值设置默认选中选项
(3)select节点.value:得到选中的option值
(4)option节点.text:得到选项的文本信息,也就是用户看到的选项文字
(5)option节点.value:得到的是选项的值,和SELECT选中的值有区别
(6)可以通过节点操作对select的option进行增删查改操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="#"> <select class="province"> <option value ="">--请选择省份--</option> </select> </form> <script type="text/javascript"> let menu = [ { name: "四川省", pid: 51, city: [ { name: "成都市", cid: 5101 }, { name: "绵阳", cid: 5107 }, { name: "宜宾", cid: 5115 }, { name: "广安", cid: 5116, ciyer:[ { name: "华蓥市", cyid: 51161 }, { name: "邻水县", cyid: 51162 }, { name: "岳池县", cyid: 51163 }, { name: "武胜县", cyid: 51164 } ] }, { name: "自贡", cid: 5103 } ] }, { name: "云南省", pid: 53, city: [ { name: "昆明", cid: 5301 }, { name: "玉溪", cid: 5302 }, { name: "大理", cid: 5329 }, { name: "丽江", cid: 5304 }, { name: "腾冲", cid: 5305 }, { name: "文山", cid: 5306 } ] }, { name: "重庆市", pid: 50, city: [ { name: "渝中区", cid: 5001 } ] }, { name: "浙江省", pid: 32, city: [ { name: "杭州市", cid: 3201 } ] } ] let form = document.forms[0]; let select = document.querySelector(".province"); // 依次添加省份 for(let i = 0; i < menu.length; i++) { select.innerHTML += '<option value = ' + menu[i].pid +'>' + menu[i].name + '</option>'; // select.innerHTML += `<option value="${menu[i].pid}">${menu[i].name}</option>`; } let newSelect1 = document.createElement("select"); console.log(newSelect1) select.addEventListener("change", function(e) { if(e.target.value == "") { document.forms[0].removeChild(newSelect1) } // 每一次添加新的省份城市时,都要清空newSelect中设置的市 newSelect1.innerHTML = ""; for(let i = 0; i < menu.length; i++) { if(e.target.value == menu[i].pid) { let city = menu[i].city; for(let j = 0; j < city.length; j++) { let option = document.createElement("option"); option.innerHTML = city[j].name; option.value = city[j].cid; newSelect1.appendChild(option); } document.forms[0].appendChild(newSelect1); } } }) let newSelect2 = document.createElement('select'); newSelect1.addEventListener("change", function(e) { if(e.target.value == "") { document.forms[0].removeChild(newSelect2) } // 每一次添加新的省份城市时,都要清空newSelect中设置的市 newSelect2.innerHTML = ""; for(let i = 0; i < menu.length; i++) { for(let j = 0; j < menu[i].city.length; j++){ if(e.target.value == menu[i].city[j].cid) { let city = menu[i].city[j].ciyer; for(let k = 0; k < city.length; k++) { let option = document.createElement("option"); option.innerHTML = city[k].name; option.value = city[k].cyid; newSelect2.appendChild(option); } document.forms[0].appendChild(newSelect2); } } } }) </script> </body> </html>