问题:
1.DOM是哪种基本的数据结构
2.DOM操作常用的API有哪些
3.DOM节点的Attribute和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节点操作
1:获取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') //集合
2: property
- js对象的属性,-所有的的对象的属性都叫做 property
var pList = document.querySelectorAll('p');
console.log(pList) //节点的集合
var p = pList[0];
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);
//对比对象获取属性的方法
var obj = {name:'jiangdeng',age:22};
console.log(obj.name); //"jiangdeng"
var p = document.getElementsByTagName('p')[0];
console.log(p.nodeName)
3: Attribute (有关文档的标签属性)
标签属性，用于扩充HTML标签，可以改变标签行为或提供数据，格式为name=value
var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('data-name') //获取标签内的属性
p.setAttribute('data-name','imooc') //属性-值 的形式来设置 attr
p.getAttribute('style');
p.setAttribute('style','font-size:30px')
p.setAttribute('class','xiaopingguo')
//示例2
var p1 = document.getElementById('p1');
var pstyle = p1.getAttribute('style');
//console.log(pstyle);
p1.setAttribute('style',"border:2px solid orange")
p1.setAttribute('class','xiaopingguo')
//
DOM 结构操作
新增节点
获取父节点
获取子节点
删除节点
新增节点
var div1 = document.getElementById('div1');
//创建元素
var p1 = document.createElement('p');
//添加内容
p1.innerHTML = 'This is my house';
//添加新创建的节点到
div1.appendChild(p1)
//移动已有节点
var p2 = document.getElementById('p2');
divX.appendChild(p2);
- 获取父节点&子节点
var div1 = document.getElementById('div1');
var parent = div1.parentElement;
var child = div1.childNodes;
- 删除节点
div1.removeChild(child[0])
解题
问题:
1.DOM是哪种基本的数据结构
- 树
2.DOM操作常用的API有哪些
1:获取DOM节点;2:获取和设置节点的property和Attribute
- 获取父节点,获取子节点
- 新增节点,删除节点
3.DOM节点的 Attribute 和property有何区别
- property 只是一个js对象的属性修改
- Attribute 是针对HTML标签属性的修改
4.如何检测浏览器的类型
navigator.userAgent
// navigator
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
// screen
console.log(screen.width)
console.log(screen.height)
5.拆解url的各部分
//location
console.log(location.href); //整个URL; http://www.jianshu.com/
console.log(location.host) // www.jianshu.com
console.log(location.protocol); //协议 http https
console.log(location.pathname); //域名之后的路径; writer#/
console.log(location.search); // 问号后面的查询字符串
console.log(location.hash); // 哈希
补充: history
//history
history.back();
history.forward();
//页面上返回功能
var a = document.createElement('a');
a.innerHTML = '<input type="button" id="btn" name="" value="后退">'
document.body.append(a);
var btn = document.getElementById('btn');
btn.onclick = function(){
prev()
}
function prev(){
history.back()
}
ƒ (){
prev()
}
