什么是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
