DOM

vue和React框架应用广泛，封装了DOM操作，但DOM操作一直都会前端工程师的基础、必备知识，只会Vue而不懂DOM操作的前端程序员，不会长久

本质

html语言解析出来的树结构

可以通过js获取浏览器的dom节点

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

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

const containerList = document.getElementsByClassName('container') // 集合
console.log('containerList.length', containerList.length)
console.log('containerList[1]', containerList[1])

const pList = document.querySelectorAll('p')
console.log('pList', pList)

const pList = document.querySelectorAll('p')
const p1 = pList[0]

通过property和attribute修改节点属性

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

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

// attribute
p1.setAttribute('data-name', 'imooc')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

新建、移动节点

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 )

// 获取子元素列表
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', div1ChildNodesP)

div1.removeChild( div1ChildNodesP[0] )

dom性能优化

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')

// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()

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

    // 先插入文档片段中
    frag.appendChild(li)
}

// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)

console.log(list)

BOM

浏览器信息查看

//navigator
const ua = navigator.userAgent
const isChrome = ua.indexOf('Chrome')
console.log (isChrome)
//screen
console.log(screen.width)
console.log (screen.height)

地址信息查看

//location
console.log(location.href)
console.log(location.protocol)//'http:'https:
console.log(location.pathname)//'/learn/199'
console.log(location.search)// ? ...
console.log(location.hash) // # ...
//history
history.back() //后退
history.forward() //前进