什么是DOM？
DOM：document object model 文档对象模型
DOM会把文档看作是一颗树，每个元素就是文档这棵树的节点，同时定义了许多方法来操作这棵树中每一个元素。节点中的每一个元素，我们称为DOM节点。
操作这棵树的方法我们之前已经接触过一些，例如
getElementById,getElementsByTagName....,还有例如document,document.body....这都是DOM提供的。
***
### children子节点
元素.children——只读属性 是子节点列表集合
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
height: 30px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
for(var i = 0;i < oUl.children.length;i++){
oUl.children[i].style.background = 'yellow';
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
~~~
***
### firstElementChild第一个子节点
### lastElementChild(最后一个子节点)
### nextElementSibling(下一个兄弟节点)
### previousElementSibling(上一个兄弟节点)
### parentNode：当前节点父级节点
课堂练习-1：点击a标签隐藏所在li标签
~~~
<script>
window.onload = function () {
var oUl = document.getElementById('ul1');
/*
点击a标签隐藏整行，以前也能做，但是比较麻烦，获取a，获取li
现在换一种方式
*/
var aA = document.getElementsByTagName('a');
for(var i = 0;i < aA.length;i++){
aA[i].onclick = function () {
// 点击a时正好要隐藏的是父级li
/*
元素.parentNode:当前节点的父级节点
没有兼容节点，放心使用
*/
this.parentNode.style.display = 'none';
}
}
}
</script>
<body>
<ul id="ul1">
<li>11111 <a href="javascript:;">隐藏</a></li>
<li>22222 <a href="javascript:;">隐藏</a></li>
<li>33333 <a href="javascript:;">隐藏</a></li>
<li>44444 <a href="javascript:;">隐藏</a></li>
<li>55555 <a href="javascript:;">隐藏</a></li>
</ul>
</body>
~~~
### offsetParent：有定位的父节点
### offsetLeft,offsetTop：当前元素到定位父级的距离
### 元素的创建 document.createElement
### appendChild追加子节点
### insertBefore在指定元素前插入一个元素
~~~
<script type="text/javascript">
window.onload = function(){
var oText = document.getElementById('text');
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('list');
oBtn.onclick = function(){
if(oText.value == null || oText.value == ''){
alert('什么都没有');
}else{
var li = document.createElement('li');
li.innerHTML = oText.value;
// oUl.appendChild(li);
// li.insertBefore(oUl.children[0]);
oUl.insertBefore(li,oUl.children[0]);
oText.value = '';
}
}
}
</script>
~~~
### getElementsByClassName
### 其他常见事件
#### onchange
#### onsubmit
主动提交submit()
#### onreset
