DOM:文档对象模型
DOM对象核心
浏览器网页就是一个Dom树形结构
1.更新：更新Dom节点
2.遍历Dom节点：得到Dom节点
3.删除：删除一个Dom节点
4.添加:添加一个新的节点
要操作一个Dom节点，就必须要获得这个Dom节点
获得Dom节点
JavaScript
//对应CSS选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var childrens = father.children; //获取父节点下的所有子节点
更新Dom节点
JavaScript
<div id = "id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>操作文本
修改文本的值：id1.innerText=’456′
可以解析HTML文本：id1.innerHTML=’123′
操作JS
JavaScript
id1.style.color = 'yellow'; //属性使用 字符串 包裹
id1.style.fontSize = '20px';// -转 驼峰命名问题
id1.style.pading = '2em' 删除Dom节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
HTML
<div id ="father">
<h1>标题一</h1>
<p id ="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1 = document.getElementById('p1');
father.removeChild(p1)
</script>插入Dom节点
获取了某个Dom节点，假设这个节点Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，就不可以这样了，会产生覆盖 。但是可以追加
HTML
<body>
<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>
</body>创建一个新的标签，实现插入
HTML
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);
//通过JS创建一个新节点
var NewClient = document.createElement('p'); //创建一个新节点
NewClient.id = 'Newp';
NewClient.innerText = 'HelloWorld';
list.appendChild(NewClient);
</script>提交表单
HTML
<form action="post">
<p>
<span>用户名：</span>
<input type="text" name="text" id="username">
</p>
<p>
<span>密码：</span>
<input type="text" name="text" id="password">
</p>
<!-- 绑定事件 -->
<button type="button" onclick="abs()">提交</button>
</form>
<script>
function abs(){
var usename = document.getElementById('username');
var pasword = document.getElementById('password');
}
</script>