dom中的表单可以进行什么样的操作，操作的方法是什么？本篇文章就分享给大家javascript中dom的表单操作，内容很详细，一起来看看吧。
1、获取表单
获取表单元素
以document对象中forms属性来获取当前html页面所有表单集合
以document对象中表单的name属性值来获取表单元元素
<body><form action="#"> <input type="submit"></form><form name="mylove" action="#"> <input type="submit"></form><script> console.log(document.forms);// 获取当前html页面所有表单元素 console.log(document.mylove);// document表单名称-有些新浏览器是不支持</script></body>
获取表单组件元素
以htmlformelement对象的elements属性来获取表单组件的集合
<body><form action="#"> <input type="text" name="username"> <input type="submit"></form><script> var form = document.forms[0]; console.log(form.elements);</script></body>
2、表单操作
文本内容的选择
以htmlelement对象和htmltextareaelement对象中select()方法来获取文本框所有文本框的内容
<body><form action="#"> <input type="text" id="username" value="请输入你用户名"> <!----> <input type="submit"> <!--定义提交按钮--></form><script> var username = document.getelementbyid(username);// 获取id属性 username.addeventlistener('focus',function(){ username.select(); }) username.addeventlistener('select',function () { console.log(username.selectionstart.username.selectionend); var value = username.getattribute('value'); var result = value.substring(username.selectionstart,username.selectionend); console.log(result); })</script></body>
设置文本内容
在html5新增中setselectionrange()方法，来获取一个焦点文本框的文本内容
body><form action="#"> <input type="text" id="username" value="请输入你用户名"> <!----> <input type="submit"> <!--定义提交按钮--></form><script> var username = document.getelementbyid(username);// 获取id属性 username.addeventlistener('focus',function(){ username.select(); }) username.addeventlistener('select',function () { console.log(username.selectionstart.username.selectionend); var value = username.getattribute('value'); var result = value.substring(username.selectionstart,username.selectionend); console.log(result); })</script></body>
操作剪切板
以copy；cut，paste 来设置 操作剪切板的复制，剪切和粘贴
<body><form action="#"> <input type="text" id="username" value="请输入你用户名"> <input type="text" id="username1"> <input type="submit"></form><script> var username = document.getelementbyid('username'); username.addeventlistener('copy',function (event) { var data = event.clipboarddata || window.clipboarddata; console.log(data); console.log('这是复制操作'); var value = username.value; var result = value.substring(selectionstart,username.selectionend); console.log(result); data.setdata('text',result); }); username.addeventlistener('cut',function () { console.log('这是个剪切操作'); }); var username1 = document.getelementbyid('username1'); username1.addeventlistener('paste',function (event) { event.preventdefault(); var data = event.clipboarddata || window.clipboarddata; var result = data.getdata('text'); /*得到datatransfer对象 * gedata()方法-获取数据内容*/ if (result === '用户名') { result ='***'; } username1.value = result; })</script></body>
下拉列表的操作
是以select和option对象来创建病提供一些属性和方法
<form action="#"> <select id="yx"> <option id="dj" value="dj">单机</option> <option value="wy">网页</option> <option value="dy">端游</option> </select> <select id="cyx1" multiple size="5"> <option value="dj">单机</option> <option value="wy">网页</option> <option value="dy">端游</option> </select></form><script> var yx = document.getelementbyid('yx'); // htmlselectelement对象 console.log(yx.length); console.log(yx.options); console.log(yx.selectedindex);// 被选中<option>的索引值 // 属性 var yx1 = document.getelementbyid('yx1'); // size属性默认值是 0 console.log(yx1.size); console.log(yx1.item(1)); yx1.remove(2); var dj = document.getelementbyid('dj'); console.log(dj.index); console.log(dj.selected); console.log(dj.text); console.log(dj.value);</script>
3、表单验证
以checkvalidity()如元素值不存在验证问题，会是true，如不是则返回false
以setcustomvalidity（message）会为元素自定义个错误信息，如果设置了，该元素未无效，并显示
<body><form action="#"> <input type="text" id="username"> <input type="submit"></form><script> var username = document.getelementbyid('username'); username.addeventlistener('blur',function () { var value = username.value; if (value === '' || value === undefined || vaiue === null) { console.log('请输入你用户名'); } });</script></body>
4.表单提交
submit事件
以submit表示提交表单
<body><form action="#"> <input type="text" id="username"> <input type="submit"></form><script> var form = document.forms[0]; form.addeventlistener('submit',function (event) { console.log('该表单已被提交'); });</script></body>
submit(）方法
以submit表示提交表单，并用使用任意普通按钮即可完成提交
<body><form action="#"> <input type="text" id="username"> <input id="qyc" type="button" value="提交"></form><script> var qyc = document.getelementbyid('qyc'); qyc.addeventlistener('click',function () { var form = document.forms[0]; form.submit();//提交表单 });</script></body>
相关推荐：
javascript和jquery的dom操作
javascript dom的本质及操作方法
以上就是javascript中dom的表单操作（附代码）的详细内容。