面试-JS Web API-DOM操作和DOM性能

1. 获取子元素
   const div1 = document.getElementById('div1')
const child = div1.childNodes

2. 获取父元素
   const div1 = document.getElementById('div1')
const parent = div1.parentNode

3. 新增节点
   const p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) //添加新创建的元素
   // 移动已有节点（不是删除）
   const p2 = document.getElementById('p2')
div1.appendChild(p2)

4. 删除节点
   div1.removeChild(child[0])

DOM性能

• DOM查询作缓存
  

避免频繁操作，先创建一个临时区域来做循环，最后一次性插入到DOM中。