js-web-dom

DOM 是哪种数据结构？

dom是 树结构

DOM常用API

getElementById

getElementsByClassName

getElementsByName

querySelectorAll

appendChild

children

attribute 和 property 的区别

• attribute

document.body.setAttribute('data-color', 'red')

attribute 会直接作用于HTML上

• property

document.body['data-color'] = 'red'

property 不会直接作用在HTML上

如果设置的是 document.body.style.color = 'red', 这类dom自带的属性时会直接作用在HTML元素上

一次性插入多个节点， 考虑性能怎么做？

const wrap = document.createDocumentFragment()
for(let i=0; i<10; i++){
  const p = document.createElement('p')
  p.innerText = i
  wrap.appendChild(p)
}
document.body.appendChild(wrap)