JavaScript—DOM对象
一、操作DOM对象
1.1、DOM对象的核心
浏览器的网页本身就是一个DOM的树形结构。其包含有：
1.更新：更新DOM节点；
2.遍历DOM节点：得到DOM节点；
3.删除：删除一个DOM节点；
4.添加：添加一个新的DOM节点。
在进行操作一个DOM节点的时候，就必须要先获得这个DOM节点。
1.2、获得DOM节点
获得DOM节点的原生代码：
// 对应的CSS选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementsById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementsById('father');
var childrens = father.children;
//获取父节点下的所有的节点
//father.firstChild
//father.lastChild
尽量使用jQuery()；
1.3、更新DOM节点
更新DOM节点的代码：
<div id="id1">
</idv>
<script>
var id1 = document.getElementsById('id1');
</script>
注：
用来操作文本的为：
1.id1.innerText='123' //修改文本的值
2.id1.innerHtml='<strong>123</strong>' //可以解析HTML文本标签
用来操作JavaScript的为：
1.id1.style.color = 'yellow'; //属性的使用 字符串 包裹
2.id1.style.fonsize = '20px';
3.id1.style.padding = '2em';
1.4、删除DOM节点
删除DOM节点的主要步骤为：先要获取父节点，通过父节点删除自己。
其代码为：
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementsById('p1');
var father = p1.parentElement;
father.removeChild(self)
//删除的是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注：删除多个节点的时候，children是时刻都在变化的，在删除节点的时候需要特别注意。
1.5、插入DOM节点
在获得一个DOM节点的时候，如果这个DOM节点是空的，我们通过innerHTML便可以增加一个元素，但是这个DOM节点已经存在元素，因此这个方法就不行了。
所以就需要追加：
<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.getElementsById('js');
var list = document.getElementsById('list');
list.appendChild(js); //追加到后面
</script>
1.6、创建一个新标签，实现插入
代码：
<script>
var js = document.getElementsById('js'); //已经存在的节点
var list = document.getElementsById('list');
//通过JavaScript再创建一个新的节点
var newP = document.createElement('p'); //创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello';
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
//创建一个style标签
var myStyle = document.createElement('style'); //创建一个空的style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{20px;}'; //设置标签的内容
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
1.7、insertBefore
代码：
var ee = document.getElementsById('ee');
var js = document.getElementsById('js');
var list = document.getElementsById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
二、操作表单
2.1、表单的介绍
表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
其包含：
1.文本框：text
2.下拉框：<select>
3.单选框：radio
4.多选框：checkbox
5.隐藏域：hidden
6.密码框：password
等等…
表单的目的就是提交信息。
2.2、获得要提交的信息
代码：
<form action="post">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">
<input type="radio" name="sex" value="women" id="girl">
</p>
</form>
<script>
var input_text = document.getElementsById('username');
var boy_radio = document.getElementsById('boy');
var girl_radio = document.getElementsById('girl');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value = '123'
//单选框，多选框等等固定的值，boy_radio.value只能取得当前的值
boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中
girl_radio.checked = true; //赋值
</script>
2.3、提交表单
代码为：
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<botton type="submit">提交</button>
</form>
<script>
function aaa(){
alert(1);
var uname = document.getElementsById('username');
var pwd = document.getElementsById('input-password');
var md5pwd = document.getElementsById('md5-password');
md5pwd.value = md5(pwd.value);
//可以检验判断表单的内容，true就是通过提交，false就是阻止提交
return true;
}
</script>
