操作DOM对象
浏览器网页就是DOM树形结构
更新、遍历、删除、添加
要操作首先要获得
<div id="father">
<h1>标题一</h1>
<p id="p1"></p>
<p class="p2"></p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children;//获取父节点下所有的子节点
</script>
获取父节点的第一个子节点father.firstChild
获取父节点的最后一个子节father.lastChild
1)更新
操作文本的值 id1.innerText
可以解析HTML文本标签 id1.innerHTML
操作CSS id1.style.属性='值'
属性是要用字符串形式，属性 -连接转成驼峰命名
2）删除
先获取父节点，再通过父节点删除自己 var self = document.getElementById('p1');
var father = p1.parentElemnt;
father.removeChild(self);
//删除是动态的操作，如下是不对的father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
删除多个结点时，children是在时刻变化的
children属性是一个只读属性，并且它在子节点变化时会实时更新。
创建和插入
dom为空：innerHTML
dom已经存在元素
追加讲js追加到list的最后
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<P id="ee">JavaEE</P>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);
</script>
创建一个新的标签来实现插入 var js = document.getElementById('js');//已经存在的结点
var list = document.getElementById('list'); //通过js创建一个新节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'HelloWorld';
list.appendChild(newP); //添加script标签
var myScript = document.createElement('script')
myScript.setAttribute('type','text/javascript');
body.appendChild(myScript); //创建style标签
var myStyle = document.createElement('style')
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:blue}';
document.getElementsByTagName('head')[0].appendChild(myStyle);insertBefore
语法：
要包含的节点
.insertBefore(newNode,targetNode) var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);
操作表单 验证
表单的目的：提交信息
<form action="" method="POST">
<span>用户名：</span><input type="text" id="username">
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</form>
<script>
input_text.value;（用来获取输入框的值，赋值并进行修改）
boy_radio.checked;（如果返回结果为true，boy目前被选中）
girl_radio.checked = true;（可以通过赋值方式，去选择girl）
</script>
(1）前段加密MD5
初级验证：required必填属性 placeholder
js验证:
表单验证时绑定一个事件onsubmit，将这个返回的结果给表单，再使用onsubmit来接收。
