[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>
```
