1.DOM是哪种基本的数据结构
2.DOM操作常用的API有哪些
3.DOM节点的attr和property有何区别
4.如何检测浏览器的类型
5.拆解url的各部分
知识点#####
DOM本质
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 交互的API文档。DOM 是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。
DOM可以理解为浏览器把拿到的HTML代码，结构化为一个浏览器能识别并且js可操作的模型。BOM本质
BOM（Browser Object Document）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；-
DOM节点操作
- 获取DOM节点
var div1=document.getElementById('div1') //元素 var divList=document.getElementByTagName('div') //集合 console.log(divList.length); console.log(divList[0]); var containerList=document.getElementByClassName('.container') //集合 var pList=document.querySelectorAll('p') //集合 - property
js对象的属性
var pList=document.querySelectorAll('p')
var p=pList[0]
//获取了DOM对象，对象在js中都是可扩展的
console.log(p.style.width); //获取样式
p.style.width='100px' //修改样式
console.log(p.className); //获取className
p.className='p1' //修改className//获取nodeName和nodeType
console.log(p.nodeName);
console.log(p.nodeType);- Attribute - 获取DOM节点
标签属性，用于扩充HTML标签，可以改变标签行为或提供数据，格式为name=value
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 div1=document.getElementById('div1')
var p1=document.createElement('p') //创建新节点
p1.innerHTML='Hello'
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]) //移除child[0]子节点
- navigator&screen
//ua
var ua=navigator.userAgent
var isChrome=ua.indexOf('Chrome')
console.log(isChrome);
//screen
console.log(screen.width);
console.log(screen.height);
- location&history
//location
console.log(location.href);
console.log(location.protocol); //http https
console.log(location.pathname); //域名之后的路径
console.log(location.search);
console.log(location.hash);
//history
history.back()
history.forward()
解题#####
1.DOM是哪种基本的数据结构
树
2.DOM操作常用的API有哪些
- 获取DOM节点以及节点的property和Attribute
- 获取父节点，获取子节点
- 新增节点，删除节点
3.DOM节点的attr和property有何区别
- property是一个JS对象的属性的修改
- Attribute是HTML标签属性的修改
4.如何检测浏览器的类型
navigator.userAgent
5.拆解url的各部分
//location
console.log(location.href);
console.log(location.protocol); //协议 http https
console.log(location.pathname); //域名之后的路径
console.log(location.search);
console.log(location.hash);
