JS Web API

DOM 节点操作

const div1 = document.getElementById('div1')
console.log('div1', div1)

const div2 = document.getElementsByTagName('div') // 集合
console.log('divList.length', div2.length)
console.log('divList[1]', div2[1])

const containerList = document.getElementsByClassName('container')
console.log('containerList', containerList)

const plist = document.querySelectorAll('p')
console.log(plist)

DOM 是哪种数据结构

DOM 操作的常用 API

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is p1'
// 插入节点
div1.appendChild(newP)

// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)

// 获取父元素
console.log(p1.parentNode)

// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log(div1.childNodes)

const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
  if (child.nodeType === 1) {
    return true
  }
  return false
})
console.log(div1ChildNodesP)

// 删除节点
div1.removeChild(div1ChildNodesP[0])

attr 和 property 的区别

• property: 修改对象属性，不会体现在 html 结构中
• attribute：修改 html 属性，会改变 html 结构
• 两者都有可能引起 DOM 重新渲染

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

// attribute
p1.setAttribute('data-name', 'im')
p1.getAttribute('data-name')
p1.setAttribute('style', 'font-size: 18px;')

DOM 性能

• DOM 操作非常 "昂贵"，避免频繁的 DOM 操作
• 对 DOM 查询缓存

// 不缓存 DOM 查询结果

for (let i = 0; i < document.getElementsByTagName('p').length; i ++) {
  // 每次循环，都会计算 length，频繁进行 DOM 查询
}

// 缓存 DOM 查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length; i ++) {
  // 缓存 length，只进行一次 DOM 查询
}

• 将频繁操作改为一次性操作

// 循环查询
const list = document.getElementById('list')

for (let i = 0; i< 10; i++) {
  const li = document.createElement('li')
  li.innerHTML = `List item ${i}`
  list.appendChild(li)
}

// 一次查询
// 创建一个文档片段，此时还没有插入到 DOM 中，存在于内存中
const frag = document.createDocumentFragment()

// 执行插入
for(let x = 0; x < 10; x++) {
  const li = document.createElement('li')
  li.innerHTML = `List item ${x}`
  frag.appendChild(li)
}
// 都完成之后，再插入到 DOM 树中
list.appendChild(frag)

阅读量：

评 论：