[TOC]
## DOM
### property
對js 對象進行修改
```
var pList = document.querySelectorAll('p')
var p = pList[0]
console.log(p.style.width) //獲取樣式
p.style.width='100px'
console.log(p.className) //獲取 class
p.className='p1' //修改 class
console.log(p.nodeName) //獲取 nodeName
console.log(p.nodeType) //獲取 nodeType
```
### Attribute
對html 標簽屬性進行修改
```
var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('date-name')
p.setAttribute('date-name','imooc')
p.getAttribute('style')
p.setAttribute('style','font-size:30px')
```
> `document.querySelectorAll(".boston-postcards li a")[0] ` ,`querySelectorAll`像 jquery 一樣的尋找元素
### DOM結構操作
#### 新增/移除節點
```
var div1 = document.getElementById('div1')
//創建新節點
var p1 = document.createElement('p')
p1.innerHTML='this is p1'
div1.appendChild(p1) //添加到html 中
//移動節點
var p2 = document.getElementById('p2')
div1.appendChild(p2)
```
#### 獲取父/子元素
```
var div1 = document.getElementById('div1')
//獲取父節點
var parent = div1.parentElement()
//獲取子節點
var child = div1.childNodes
```
### 刪除節點
```
var div1 = document.getElementById('div1')
var child = div1.childNodes
div1.removeChild(child[0])
```
## BOM
navigator 瀏覽器信息
screen 屏幕信息
location url 的相關信息
history 前進后退
## 事件
1. 事件冒泡
2. 代理
```html
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
// 給 div1 加入監聽事件 e.target 指獲取觸發點擊事件的 標簽
div1.addEventListener('click',function(e){
var target = e.target
if (target.nodeName==='A') { //nodeName 判斷是元素節點且元素為 a
alert(target.innerHTML)
}
})
</script>
```
