常用DOM/BOM操作

以下列举常用的DOM/BOM操作，均是原生js写法：

DOM

获取DOM节点

var div1 = document.getElementById('div1') // 元素
var divList = document.getElementsByTagName('div')  // 集合
var containerList = document.getElementsByClassName('.container') // 集合
var pList = document.querySelectorAll('p') // 集合

修改属性

var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'imooc')
p.getAttribute('style')
p.setAttribute('style', 'font-size:30px;')

DOM树操作

// 新增节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) // 添加新创建的元素

// 获取父节点
var div1 = document.getElementById('div1')
var parent = div1.parentElement

// 获取子元素
var div1 = document.getElementById('div1')
var child = div1.childNodes

// 删除元素
var div1 = document.getElementById('div1')
var child = div1.childNodes
div1.removeChild(child[0])

BOM

// navigator——检测浏览器的类型
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

// screen——屏幕
console.log(screen.width)
console.log(screen.height)

// location——拆解url的各部分
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()