DOM&BOM操作

property 、attribute 区别

<div id="div1" class="class-div1">
	<P id="p1" data-name="p1-data-name">this is p1</P>
	<P id="p2">this is p2</P>
</div>

//property
var div1 = document.getElementById('div1')
console.log(div1.className)
div1.className = 'abc'
console.log(div1.className)
//attribute
var p1 = document.getElementById('p1')
console.log(p1.getAttribute('data-name'))
p1.setAttribute('data-name','xyz')

DOM结构操作（DOM树，本身也是JS对象）

新增节点

获取父元素

获取子元素

删除节点

var div1 = document.getElementById('div1')
//添加新节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1)//添加新创建的元素
//移动已有节点
var p2 = document.getElementById('p2')
div1.appendChild(p2)

var div1 =  document.getElementById('div1')
var parent = div1.parentElement//获取父元素

var child = div1.childNodes//获取子元素 //集合 
//正常换行答应出来 会有一个空文本 text ，不换行，就不存在 text空文本
div1.removeChild(child[0])//删除节点
console.log(div1.childNodes[0].nodeType) //text 3
console.log(div1.childNodes[1].nodeType) //text 1
console.log(div1.childNodes[0].nodeName) //text #text
console.log(div1.childNodes[1].nodeName) //text p

解答

DOM是哪种基本的数据结构

• 树结构

DOM操作的常用API有哪些

• 获取DOM节点，以及节点的property和Attribute
• 获取父节点，获取子节点
• 新增节点，删除节点

DOM节点的Attribute和property有和区别

• property只是一个JS对象的属性的修改和获取
• Attribute是对html标签属性的修改和获取

重点总结

DOM本质

• XML 、 HTML

DOM节点操作

DOM结构操作

BOM操作（Browser Object Model）

题目

• 如何检测浏览器的类型
• 拆解url的各个部分

知识点

• navigator 浏览器
• screen 屏幕宽高
• location 地址栏信息
• history 前进后退

//navigator
var ua = navigator.userAgent
var 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:' 'ftp:'
console.log(location.host)//域名
console.log(location.pathname)//路径
console.log(location.search)//参数 ？后面的参数
console.log(location.hash)

//history
history.back()//浏览器后退
history.forward()//浏览器前进

如何检测浏览器的类型

var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

拆解url的各个部分

//location
console.log(location.href)//浏览器地址
console.log(location.protocol)//'http:' 'https:' 'ftp:'
console.log(location.host)//域名
console.log(location.pathname)//路径
console.log(location.search)//参数 ？后面的参数
console.log(location.hash)