《前端JavaScript面试技巧》学习笔记（6）DOM和BOM

问题:

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()
}