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>
var div1 = document.getElementById('div1')
console.log(div1.className)
div1.className = 'abc'
console.log(div1.className)
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
div1.removeChild(child[0])
console.log(div1.childNodes[0].nodeType)
console.log(div1.childNodes[1].nodeType)
console.log(div1.childNodes[0].nodeName)
console.log(div1.childNodes[1].nodeName)
解答
DOM是哪种基本的数据结构
DOM操作的常用API有哪些
- 获取DOM节点,以及节点的property和Attribute
- 获取父节点,获取子节点
- 新增节点,删除节点
DOM节点的Attribute和property有和区别
- property只是一个JS对象的属性的修改和获取
- Attribute是对html标签属性的修改和获取
重点总结
DOM本质
DOM节点操作
DOM结构操作
BOM操作(Browser Object Model)
题目
知识点
- navigator 浏览器
- screen 屏幕宽高
- location 地址栏信息
- history 前进后退
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
console.log(screen.width)
console.log(screen.height)
console.log(location.href)
console.log(location.protocol)
console.log(location.host)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
history.back()
history.forward()
如何检测浏览器的类型
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
拆解url的各个部分
console.log(location.href)
console.log(location.protocol)
console.log(location.host)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)