JavaScript删除DOM

删除一个DOM节点就比插入要容易很多

要删除一个节点秒首先要获取该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

//获取自身节点
var self=document.getElementById('id');
//获取自身节点的父节点
var parent=self.parentElement;
//删除节点
parent.removeChild(self);

注意：删除后的节点虽然已经不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置

 当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新

//结构
<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

//script代码
<script>
var parent=document.ElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]);<----浏览器会报错
</script>

注意：浏览器报错,因为parent.children[1]不是一个有效节点了，原因在于，childern是一个只读属性，并且在对字节点变化时实时更新，所以当[0]节点删除之后，节点数量从2变成1，所以[1]的节点不存在了浏览器会报错

操作表单

用js操作表单和操作DOM是类似的，因为表单本身也是DOM树

常用的输入表单

• 文本框：<input type='text'>
• 密码框：<input type='password'>
• 单选框：<input type='radio'>
• 复选框：<input type='checkbox'>
• 下拉框：<select>
• 隐藏文本：<input type='hidden'>

获取值

如果我们获取了一个input的节点的引用，就可以直接调用value获取对应的用户输入值

<input type="text" id="email">
var input=document.getElementById('email');
input.value;

也可以直接通过获取表单节点动态修改value的值

input.value="aaa";

对于单选框和复选框，设置checked为true或false即可

HTML5控件

HTML5新增了大量标准控件，常用的包括date,datetime,datetime-local,color等，它们都使用

input标签

<input type="date" value="2015-07-01">

<input type="datetime-local" value="2015-07-01 T02:03:04">

<input type="color" value="#ff0000">

注意：不支持HTML5的浏览器无法事别新的控件，会把他们当作type="text" 来显示

 提交表单

js可以有两种方式来处理表提交

方式一是通过from元素的submit方法提交一个表单，例如，相应一个button的click事件，在js提交表单

<form id="form">
    <input type="text" name="text">
    <button onclick="subim()">Submit</button> 
</form>
<script>
function subim(){
    var su=document.getElementById('form');
//可以修改form的input
//提交form
    su.submit();
}
</script>

这种方式的缺点是扰乱了浏览器对表单的正常提交，浏览器点击按钮时提交表单，或者用户在最后一个输入框回车键，不建议使用

第二种方式相应from本身的onsubimit事件

//onsubmit提交事件
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>
<script>
function checkForm(){
var form=document.getElementById('test-form');
//返回的为tren来告诉浏览器继续提交，如果为false浏览器不会继续提交form
return true;
}
</script>

比如，很多登录表单希望用户输入用户和密码，但是安全考虑，提交表单时不传输明文口令，而是口令的MD5（对密码加密）

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password" >
    <input type="hidden" id="md5-password" name="password" >
    <button type="submit">Submit</button>
</form>
<script>
function checkForm(){
var pwd=document.getElementById('input-password');
var md5=document.getElementById('md5-password');
md5.value=md5(pwd.value);
return true;

}
</script>

通常这样高级用法

注意：没有name属性的input的数据不会被提交

 操作文件

在HTML表单中，可以上传文件的唯一控件就是<input type="file">

处于安全考虑，浏览器只允许用户点击file来选择本地文件，用JavaScript对file的value赋值时没有任何效果的，当用户选择了上传某个文件后，JavaScript也无法获得该文件真实路径

 通常，上传的文件都是由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式文件

var d=document.getElementById('file');
var fileName=d.value;
if(!fileName || !(fileName.endsWith(".jpg"))){
    alter("这个文件不能上传");
    return false;
}