DOM对于表单的操作

获取表单元素

获取表单的方式目前来说有很多种实现方式，先给大家回顾一下不同方法的获取表单方式

//html代码
<form id='myform' name='myform' class='login' action='#'></form>
//JavaScript代码
<script>
    var formId=document.getElementById('myform');
    var formName=document.getElementsByName('myform');
    var formElement=document.getElementsByTagName('form')[0];
    var formClass=document.getElementsByClassName('login')[0];
    
    var formId2=document.querySelector('#myform');
    var formElement2=document.querySelectorAll('form')[0];
</script>

Document对象提供了forms属性

该属性用于获取当前HTML页面中所有表单的集合，返回HTMLCollection对象，该对象封装了当前HTML页面中的所有表单对象

//HTML代码
<form id='myform' name='myform' class='login' action='#'></form>
//JavaScript代码
<script>
    //直接获取页面上所有的form集合
    var forms=document.forms;
    console.log(forms);
</script>

获取表单中组件元素

HTMLFormElement对象的elements属性
该属性用于获取指定表单的所有组件的集合

//html代码
<form id='myform' action='#'>
    用户名:<input type='text'><br>
    密码:<input type='password'><br>
</form>
//JavaScript代码
<script>
    var myform=document.forms[0];
    var formElement=myform.elements;
    console.log(formElement);
</script>

文本框的操作

<input>元素对应DOM中的对象是HTMLInputElement对象，而<textarea>元素对应DOM中的对象是HTMLTextAreaElement对象，HTMLInputElement对象和HTMLTextAreaELement对象的共同父级对象是HTMLElement对象。所以，这两个对象在很多操作上是比较相似的

• 文本内容的选择

HTMLInputElement对象和HTMLTextAreaElement对象都提供了select()方法，该方法用于选择当前文本框的所有文本内容

//HTML代码
<form id='myform' action='#'>
    <input type='text' id='username' value='请输入您的用户名'>
</form>
//JavaScript代码
<script>
    var username=document.getElementById('username');
    //给对象绑定focus事件
    username.addEventListener('focus',function(){
        //选中当前元素所有文本内容，this在这里指当前绑定事件的元素
        this.select();
    });
</script>

• select事件

select()方法对应着select事件，也就是说：当调用select()方法时，会触发select事件

//html代码
<form id='myform' action='#'>
    <input type='text' id='username' name='username' value='请输入您的用户名'>
</form>
<script>
    var username=document.getElementById('username');
    //给元素绑定select事件，当你鼠标选中输入框里的文字，会触发事件处理函数里面的console.log
    username.addEventListener('select',function(){
        console.log('这是一个文本输入框元素');
    });
</script>

selectionStart:表示用户选中文本内容的开始索引值
selectionEnd:表示用户选中文本内容的结束索引值的下一个值

//html代码
<form action="#">
    <input type='text' id='username' value='请输入你的用户名'>
</form>
//JavaScript代码
<script>
    var username=document.getElementById('username');
    username.addEventListener('select',function(){
        //直接获取用户选中元素中文本内容的开始索引值到结束索引值
        console.log(this.selectionStart,this.selectionEnd);
    });
</script>

• 设置文本内容

setSelectionRange()方法
作用：设置选择的文本内容
注意：
焦点在文本内容的最后面：select()方法(全选)
焦点在设置文本内容的范围内有效

//html代码
<form>
    <input type='text'id='username' value='请输入你的用户名'>
</form>
//JavaScript代码
<script>
    var form=document.forms[0];
    var username=form.elements[0];
    username.addEventListener('focus',function(){
        //当前设置此属性，用户选中将会是在此属性开始的位置到结束位置的范围
        username.setSelectionRange(0,5);
    });
</script>

• 操作剪切版

剪切板功能是经常被忽略，却很重要的功能，可以增强用户体验，方便用户交互，以下三个事件时剪切板的主要操作
1.copy：在发生复制操作时触发
2.cut：在发生剪切操作时触发
3.paste:在发生粘贴操作时触发
事件对象的clipboardData属性存储了由用户触发剪切板事件时所影响的带有MIME类型的数据。注意：IE 8及之前版本的浏览器，clipboarData属性需要通过window对象获取

var clipboardData=event.clipboardData||window.clipboardData;

该属性得到的是一个DataTransfer对象，该对象提供了操作数据的常用方法
1.setData()方法：设置数据内容
2.getData()方法：获取数据内容
3.clearData()方法：删除与给定类型关联的数据

//html代码
<form action='#'>
    <input type='text' id='username' value='请输入您的用户名'>
    <input type='text' id='username1'>
</form>
//JavaScript代码
<script>
    var username=document.getElementById('username');
    //这是一个复制操作
    username.addEventListener('copy',function(event){
        //得到DataTransfer对象：setData()方法 - 设置数据内容
        var data=event.clipboardData||window.clipboardData;
        var value=username.value;
        var result=value.substring(username.selectionStart,username.selectionEnd);
        data.setData('text',result);
    });
    //这是一个剪切操作
    username.addEventListener('cut',function(){});
    
    var username1=document.getElementById('username1');
    username1.addEventListener('paste',function(event){
        //阻止默认行为,系统存在的粘贴功能
        event.preventDefault();
        var data=event.clipboardData||window.clipboardData;
        var result=data.getData('text');
        username1.value=result;
    });
</script>

下拉列表操作

下拉列表是由<select>和<option>元素创建的。<select>元素在DOM中对应的是HTMLSelectElement对象，<option>元素在DOM中对应的是HTMLOptionElement对象，这两个对象都提供了一些属性和方法，方便操作下拉列表
HTMLSelectElement对象是<select>元素在DOM中对应的对象

• 该对象提供的属性

length:表示当前<select>元素中<option>元素的个数
multiple:表示<select>元素是否允许多项选择，等价于HTML中的multiple属性
options：当前<select>元素中<option>元素对象的集合
selectedIndex：代表第一个被选中的<option>元素，-1代表没有元素被选中
size：当前<select>元素中可见的行数，等价于HTML中的size属性

• 该对象提供的方法如下表所示

add(item,[before]):将<option>元素添加到当前<select>元素的选项元素集合中
item(idx):放回索引值为idx的<option>元素，如果没有，返回null
remove(index):从当前<select>元素的选项元素集合中删除指定索引值的<option>元素
HTMLOptionElement对象是<option>元素在DOM中对应的对象

• 该对象提供的属性

index:当前<option>元素在其所属的选项列表中的索引值
selected:表示当前<option>元素是否被选中
text:当前<option>元素的文本内容
value:当前<option>元素的value属性值

HTML5验证API

HTML5提供了一组用于表单验证的API，目前主流浏览器对HTML5提供的验证API支持越来越好

• 验证API的属性

validity: 一个validityState对象，描述元素的验证状态
validity.customError：如果元素设置了自定义错误，返回true，否则返回false
validity.patternMismatch：如果元素的值不匹配所设置的正则表达式，返回true，否则返回false
validity.rangeOverflow:如果元素的值高于所设置的最大值，返回true，否则返回false
validity.rangeUnderflow:如果元素的值低于所设置的最小值，返回true，否则返回false
validity.stepMismatch：如果元素的值不符合step属性的规则，返回true，否则返回false
validity.tooLong：如果元素的值超过所设置的最大长度，返回true，否则返回false
validity.typeMismatch:如果元素的值出现语法错误，返回true，否则返回false
validity.valueMissing:如果元素设置了required属性且值为空，返回true，否则返回false
validity.valid：如果元素的值不存在验证问题，返回true，否则返回false

• 验证API的方法

checkValidity():如果元素的值不存在验证问题，返回true，否则返回false
setCustomValidity(message)：为元素添加一个自定义的错误消息，如果设置了自定义错误消息，则该元素被认为是无效的，并显示指定的错误

表单提交

提交表单时，会触发submit事件
表单还提供了submit()方法用于提交表单，使用该方法时允许表单内使用任一普通按钮即可(并非提交按钮)
注意：使用submit()方法提交表单不会触发submit事件

//html代码
<form action='#'>
    <input type='text' id='username'>
    <input type='submit'>
</form>
//JavaScript代码
<script>
    var form=document.forms[0];
    form.addEventListener('submit',function(event){
        //阻止表单提交的默认行为  
        event.preventDefault();
    });
</script>

submit()方法

//html代码
<form action="#">
    <input type='text' id='username'>
    <input id='btn' type='button' value='提交'>
</form>
//JavaScript代码
<script>
    var btn=document.getElementById('btn');
    btn.addEventListener('click',function(){
        var form=document.forms[0];
        form.submit();//提交表单
    });
</script>