JavaScript基础知识——DOM和BOM

QA：1、DOM是哪种基本的数据结构（树形结构）

　　  2、DOM操作常用的API有哪些

　　  3、DOM节点的Attribute和property有何区别

　　  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.cnblogs.com/
console.log(location.host) // www.cnblogs.com
console.log(location.protocol); //协议 http/https
console.log(location.pathname); //域名之后的路径; writer#/
console.log(location.search); // 问号后面的查询字符串
console.log(location.hash); // 哈希

知识点：

1、DOM本质

　　DOM：Document Object Model——文档对象模型

2、BOM本质

　　BOM：Browser Object Document——流量器对象模型

(1)、获取DOM节点

　　根据Id获取元素：document.getElementById('div');//获取的是一个元素

　　根据标签名获取元素集合：document.getElementByTagName('div');//获取的是集合

　　根据class获取元素集合：document.getElementByClassName('div');//获取的是集合

　　根据选择器获取元素的集合：document.querySelectorAll('p');//获取的是集合

(2)、propety

　　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','list') //属性-值 的形式来设置 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')

(4)、DOM结构操作

　　新增节点

var div = document.getElementById('div');
var p = document.createElement('p');
p.innerHTML = '我是一个p标签';
div.appendChild(p);

//以上操作就是先获取id为div的元素，然后创建一个p元素，并设置p元素的内容为……，然后将p元素添加到div里面

　　获取父节点

　　获取子节点

var div = document.getElementById('div');
var parent = div.parentElement;//父节点
var child = div.childNodes;//子节点

　　删除节点

var div = document.getElementById('div');
div.removeChild('p');

history(带增加)