---
- **document**
- 功能
- `getElementById` `$('#aaa')`
- `getElementByTagName` `$('div')`
- `getElementsByClassName` `$('.aaa')`
- `getElementsByName` 只用在表單元素中
- **document object**
- 屬性：
- `className`，`style`
- `id`
- `name`,`value`(表單元素)
- `href`,`src`…(對應的元素)
- `innerHTML`
- `children`
- `parentNode`
- 功能方法：
- `setAttribute/getAttribute`
- `appendChild`
**1.DOM與節點的關系：**
------
- node:
- `childNodes[]`
- `parentNode`
- `firstChild`
- `getElementsByTagName('元素標簽')`
- `lastchild`
- `nextSibling`
- `previousSibling`
- `children[index]` `children` 不是`w3c`標準 但是各大瀏覽器兼容性很好
- 通過給原型添加方法在元素后面創建標簽
**2.DOM方法小結**
------
- `cloneNode` 返回當前節點的拷貝
- `createAttribute` 創建新的屬性
- **插入節點**
- - `node.insertBefore()`
- `node.insertAdjacentElement()`
- **刪除節點**
- `node.remove()`
- `node.removeChild()`
- `node.removeNode()`
- **替換節點**
- `node.replaceChild()`
- `node.replaceNode()`
- `node.swapNode()`
- `node.cloneNode(bAll)`返回復制復制節點引用
- `node.contains()` 是否有子節點
- `node.hasChildNodes()`是否有子節點
<br/>
**3.常用事件**
***
- `onclick:`當事件源被點擊的時候調用處理程序
- `onmouseover:`鼠標進入事件
- `onmouseout:`鼠標移出事件
- `onmousedown:`鼠標按下去的時候
- `onmouseup:`鼠標抬起來的時候
- `onscroll:`當事件源滾動條滾動的時候
- `onkeydown:`當鍵盤按下的時候
- `onkeypress:`當鍵盤按下去的時候
- `onkeyup:`當鍵盤彈上來的時候
- `onfocus:`當事件源獲得光標
- `onblur:`當事件源失去光標
- `onchange:`當事件源`blur`的時候內容改變了的話
