DOM增删改查、事件代理、事件冒泡

  <div id="content">
      <div class="div2">2</div>
      <div class="div1">1</div>
      <div class="div2">2</div>
   </div>
    <style> 
       .div1 {
        width: 100px;
        height: 100px;
        background: red;
       }
       .div2 {
        width: 50px;
        height: 50px;
        background: green;
       }
    </style> 

获取DOM节点增删改查

• 查询-获取元素节点

const content = document.getElementById('content') // 元素
const divList = document.getElementsByTagName('div') // 集合
const div2List = document.getElementsByClassName('div2') // 集合
const pList = document.querySelectorAll('div')// 集合

console.log('content', content)
console.log('divList', divList)
console.log('div2List', div2List)
console.log('pList', div) // == divList

• 插入

const content = document.getElementById( 'content' )
// 新建节点
const p1 = document.createElement( 'p' )
p1.innerHTML = "this is p1"
// 播入节点 appendChild() 方法将节点（元素）作为最后一个子元素添加到元素。
content.appendChild(p1) 

• 移动节点（对于现有节点插入会删除原先的，插入到指定的位置）

• 删除

const content = document.getElementById('content')
const child = content.childNodes 
content.removeChild(child[1])

DOM节点的property

property和attribute区别

Property修改的是js变量上的属性，attribute修改的是标签上的属性
Property修改对象属性不会提现到html结构中，attribute修改html属性会改变html结构

// property 形式
p1.style.width = '100px'
console.log( pl.style.width )
p1.className = 'red'
console.log( p1. className )
console.log(p1.nodeName)
console.log(p1.nodeType) // 1

// attribute
p1.setAttribute('data-name" "imooc')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

DOM性能

• DOM查询做缓存
• 将频繁操作改为一次性操作

事件绑定

// 事件绑定 - 监听某个元素
function bindEvent(ele, type, fn) {
  ele.addEventListener(type, fn)
}

const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', e => {
  console.log('btn1')
  e.preventDefault() // 阻止默认行为    
})

事件冒泡

const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', e => { 
  e.stopPropagation() // 阻止事件冒泡
})

• 基于DOM树形结构
• 事件会顺着触发元素网上冒泡
• 应用场景:代理

事件代理

当前元素不好判断（数量太多或其他情况，则把事件绑定到他的父级dom元素上）
利用了事件冒泡

无线下拉图片列表，如何监听每个图片的点击

• 事件代理
• 用etarget 获取触发元素
• 用matches来判断是否是触发元素