WebTest/http-server/dom操作.js

const pList = document.getElementsByTagName('p')

// const p1 = pList[0]
// console.dir(p1)
// p1.style.width = '100px'
// console.log(p1.style)
// console.log(p1.style.width)
// p1.className = 'red'
// console.log(p1.className)
// console.log(p1.nodeName)
// console.log(p1.nodeType)
// p1.setAttribute('data-name', 'imooc')
// console.log(p1.getAttribute('data-name'))
// p1.setAttribute('style', 'font-size: 50px')

// const div1 = document.getElementById('div1')
// const div2 = document.getElementById('div2')
// const NewP = document.createElement('p')
// NewP.innerHTML = 'this is NewP'
// div1.appendChild(NewP)
// const p1 = document.getElementById('p1')
// div2.appendChild(p1)
// console.log(p1.parentNode)
// console.log(div1.childNodes)
// console.log(div1.children)
// div1.removeChild(div1.children[0])

const list = document.getElementById('list')
// 创建一个文档片段
const fragment = document.createDocumentFragment()
for(let i = 0; i < 10; i++){
  const li = document.createElement('li')
  li.innerHTML = i
  // 插入到文档片段，文档片段是在内存中
  fragment.appendChild(li)
}
// 将文档片段一次性插入
list.appendChild(fragment)