dom文檔對象模型
- 元素的獲取
- 元素的遍歷
- 元素的操作（創建、添加、替換、克隆、移除）
- 元素的屬性操作
- 元素的事件操作
- 雜項
- 前端動畫（頁面交互）
1.元素的獲取
getElementById 通過元素的id來獲取元素。 只能由document發起
getElementsByTagName 通過元素的名稱來獲得元素（得到的值是元素的集合） 可以由文檔或元素髮起
getElementsByClassName() 通過元素的樣式類名稱來獲得元素（得到的值是元素的集合） 可以由文檔或元素髮起
querySelector
querySelectorAll
都是 通過css選擇器的幫助來選擇元素
querySelector翻譯第一個符合的元素
querySelectorAll返回所有符合要求的元素集合
可以由文檔或元素髮起
2.元素的遍歷
節點，元素和文本都是節點。
parentNode
previousElementSibling nextElementSibling
firstElementChild children(集合) lastElementChild
獲取元素的父節點：parentNode()
獲取元素的前一個同胞元素:previousElementSibling()
獲取元素的後一個同胞元素:nextElementSibling()
獲取元素的第一個孩子： firstElementChild()
獲取元素的最後個孩子： lastElementChild()
3.元素的操作
var ul = document.getElementById('ul');
// 1、創建
// 創建了一個li元素
var newLi = document.createElement('li');
var txt = document.createTextNode('新的');
newLi.appendChild(txt);
// newLi.innerHTML = '新的';
// 2、添加
// ul.appendChild(newLi)
// ul.insertBefore(newLi,ul.children[2])
// 3、替換
ul.replaceChild(newLi,ul.children[1])
// 4、克隆
// cloneNode(bool)
// 克隆，會克隆元素自身，屬性，不會克隆事件。
// 參數的真假，負責元素的子孫節點是否被克隆。
ul.replaceChild(
newLi.cloneNode(true),
ul.children[0]
)
// 5、移除
// ul.removeChild(ul.children[2])
ul.children[1].remove()
4.元素的屬性操作
// 1、通用的操作
// setAttribute(name,value)
// getAttribute(name)
// removeAttribute(name)
// hasAttribute(name) 判斷有沒有xx屬性，返回布爾值。
// 2、系統認可的屬性
// 元素.name 可讀可寫
// id、src、href ...
// 3、樣式相關的屬性（class、style）
// class也是系統認可的屬性，但是class是es中的關鍵字，因此，
// 使用classname屬性名稱來替代class。
// 元素.style.cssText 可讀可寫，對style屬性的值做整體的設置。
// 元素.style.cssname 可讀可寫
// cssname 如果遇到css名稱有中橫槓，則去掉中橫槓，將其後的字母大寫。
// 4、表單的屬性操作
// 表單的值有兩套，默認值（html的代碼值）、真實值（提交值）。
// 任何表單元素都可以使用value屬性來獲取提交值（包括textarea）
// checked、selected、readonly、disabled它的值都是布爾值。
注意:
元素.innerText
元素.innerHTML
元素.outerHTML
元素.outerText
innerXX和outerXX的區別：innerXX表示只包含元素標籤之間的內容
而outerXX表示包含連元素標籤在內的內容
5.元素的事件操作
標籤內書寫onclick，實際上是屬性，只是這個屬性關聯到一個事件來執行。
元素的事件有兩個獨立的區域，互不干擾，互相獨立。
唯一區間：只能保留最後一次附加的函數
要移除唯一區間的事件，只需要再次指定事件的處理函數爲null就可以。
監聽區間：
不會發生覆蓋，要移除必須要知道函數的名稱，匿名函數無法移除。
js可以主動觸發事件，
h1.onclick()
h1.click()
都可以主動觸發事件，onclick()不會執行瀏覽器與事件關聯的默認動作
例如a(鏈接)的點擊事件，onclick()不會真的跳轉而click()會跳轉。
事件的分類：
鼠標事件、鍵盤事件、剪貼板事件、表單事件
（自定義右鍵菜單）實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義右鍵菜單</title>
<style>
#list{
width: 500px;
margin: 50px auto;
border: 1px solid black;
background-color: red;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
text-indent: 2em;
line-height: 50px;
margin: 1px;
background-color: white;
}
#menu{
position: fixed;
left: 50%;
top: 50%;
background-color: #eee;
outline: none;
display: none;
}
#menu div{
padding: 10px 20px;
cursor:pointer;
}
#menu div:hover{
background-color: #bbbbbb;
}
</style>
</head>
<body>
<div id="list">
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
</ul>
</div>
<!--div默認無法獲得焦點，通過增加屬性的方式讓div可以獲得焦點-->
<div id="menu" tabindex="-1">
<div>新增</div>
<div>修改</div>
<div>刪除</div>
</div>
<script>
var arrLi = document.querySelectorAll('#list li');
var menu = document.getElementById('menu');
// 全局註冊一個變量，記錄當前被點擊的li
var li;
// var arrLi = document.getElementById('list').getElementsByTagName('li');
for(var i=0;i<arrLi.length;i++){
arrLi[i].oncontextmenu = li_rightClick;
}
menu.onblur = menu_blur;
menu.children[2].onclick = delete_click;
function li_rightClick(e) {
// 1、屏蔽系統右鍵菜單
// return false;是民間做法
// var e = e || event;
e.preventDefault();
// 2、將菜單移動到鼠標所在的位置，並顯示，獲得焦點
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.display = 'block';
menu.focus();
// 3、將當前的li記錄到全局
li = e.target;
}
function menu_blur() {
menu.style.display = 'none';
}
function delete_click() {
// 1、執行刪除
li.remove();
// 2、關閉自定義菜單
menu.blur();
}
</script>
</body>
</html>
