DOM

1. DOM节点获取

// 通过ID获取
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]

2. DOM节点的property

修改的是JS变量的属性，不会对标签产生什么样的影响

// property 形式
const pList = document.querySelectorAll('p')
const p1 = pList[0]

p1.style.width = '100px'
console.log( p1.style.width )
p1.className = 'red'
console.log( p1.className )
console.log(p1.nodeName) // 标签节点的名称 此处为P
console.log(p1.nodeType) // 类型，DOM元素的类型一般是1

3. DOM节点的property

对DOM结构属性做的修改

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

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

总结：

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

4.DOM结构操作

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

// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// 插入节点
div1.appendChild(newP)  // 添加新创建的节点
// 将newP插入到div1里

// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)  // 移动已有节点
// 将div1里的p1移动到div2里

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

// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )
// 获取的节点不止包括P节点，还包括text节点，通过下面的方法过滤掉text节点
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] )

5.面试问题

dom是一种树结构（DOM树）
DOM节点操作、DOM结构操作
property和attribute的区别：
- property：修改对象属性，不会体现到HTML结构中
- attribute：修改HTML属性，会改变HTML结构
- 两者都有可能引起DOM重新渲染
一次性插入多个几点，考虑性能：

image.png

BOM

如何识别浏览器的类型

navigator.userAgent // 只能检测一些可能的情况，没办法严格的验证

screen

screen.width    screen.width   // 屏幕的高度和宽度

拆解url各个部分

console.log(location.href) //完整的地址
console.log(location.protocol) // 取得协议
console.log(location.host)  // 取得域名
console.log(location.search)  // 取得常用参数
console.log(location.hash) // 取得哈希值
console.log(location.pathname) //取得完整路径