JavaScript之dom操作

有一天，我正在写代码。老弟突然发来一条消息
“超，js怎么获取元素”
“document.querySelector()”
“怎么用”
…

1.获取dom元素

<div class="findme" id="findme"></div>

//获取findme这个dom
document.querySelector('.findme')

document.getElementById('findme')

document.getElementsByClassName('findme')

2.创建dom元素

//创建div，a等等都一样
document.createElement('div')

3.dom元素添加属性

let domDiv = document.createElement('div')
dom.setAttribute("name","ding")

4.性能优化（文档碎片）

大致介绍了关于dom的操作，那么众所周知频繁的操作dom会极大的影响性能。那么我们应该如何进行性能优化呢。
场景：我们需要把10张图插入到一个dom
如果我们进行10此append操作就会操作10次dom，那有没有办法之操作一次呢。这就得讲到文旦碎片fragment我们只需要将10张图片放我fragment然后将fragment添加到dom即可

let fragment = document.createDocumentFragment()
let imgArr = ["1.jpg", "2.jpg", "3.jpg"]

imgArr.forEach(item => {
	let imgDom = document.createElement('img')
	imgDom.setAttribute('src', item)
	fragment.appendChild(imgDom)
})

document.querySelector('imgBox').appendChild(fragment)

5.document.querySelectorAll()

突然想到这个，因为曾经有个场景。页面有多个名为box的盒子。如果使用querySelector这个只能获取第一个box盒子不能获得所有。可以使用querySelectorAll解决这一问题。拿到的是个数组，里面全是box的dom