BOM&&DOM
BOM的概念
提供了独立于页面内容而与浏览器进行交互的对象，其核心对象是window
在浏览器中，window对象（注意，w为小写）指当前的浏览器窗口。它也是所有对象的顶层对象。
“顶层对象”指的是最高一层的对象，所有其他对象都是它的下属。JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性
判断浏览器类型
var t = navigator.userAgent;
if(t.indexOf('Trident')!= -1){
console.log('ie内核')
}else if(t.indexOf('Presto')!= -1){
console.log('欧朋')
}else if(t.indexOf('Chrome')!= -1){
console.log('chrome ')
}else if(t.indexOf('Safari')!= -1){
console.log('Safari ')
}else{
console.log('其他')
}
判断是移动端还是PC（重要）
//移动端
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('mobi') !=-1) {
// 手机浏览器
console.log('手机')
} else {
// 非手机浏览器
console.log('非手机')
}
判断是移动端还是PC（重要）
//移动端
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('mobi') !=-1) {
// 手机浏览器
console.log('手机')
if(ua.indexOf('android') !=-1){
console.log('移动端 安卓')
}else if(ua.indexOf('ipod') !=-1
|| ua.indexOf('iphone') !=-1
|| ua.indexOf('ipad') !=-1)
{
console.log('移动端 苹果手机')
}
} else {
// 非手机浏览器
console.log('非手机')
}
location对象
location对象包含有关当前 URL 的信息。
location对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
属性：hash、host、hostname、href、pathname、port、protocol、search
href：设置或返回完整的 URL。（常用）
hash：设置或返回从井号 (#) 开始的 URL（锚）。
search：设置或返回从问号 (?) 开始的 URL（查询部分？id=1&name=abb）。（常用）
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
location对象
方法：assign(url), replace(url) , reload()
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
window.open();
打开一个新的浏览器窗口。
window.close();
关闭浏览器窗口。
alert(arg1)
显示带有一段消息和一个确认按钮的警告框。
prompt(arg1,arg2)
显示可提示用户输入的对话框。
confirm(arg1) （偶尔）
显示带有一段消息以及确认按钮和取消按钮的对话框。
history对象：
history对象保存着用户上网的历史记录,从窗口被 打开的那一刻算起.
后退一页 history.go(-1) history.back()
前进一页 history.go(1) history.forward()
前进两页 history.go(2)
window.onload
load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数。
window.onload = function() {
console.log('页面加载完毕')
};
定时器和延时器
JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。
延时器
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
var timerId = setTimeout(func, delay);
上面代码中，setTimeout函数接受两个参数，第一个参数func是将要推迟执行的函数名，第二个参数delay是推迟执行的毫秒数。
console.log(1);
//推迟执行
setTimeout(function(){
console.log(2)
},1000);
console.log(3);
广告弹出自动关闭
需要使用 oDiv.style.display = 'block';//让div显示
需要使用 oDiv.style.display = 'none';//让div隐藏
window.onscroll
可以监听页面的滚动
window.onscroll = function(){
console.log('页面滚动')
}
一旦页面滚动就会触发onscroll 函数
document.scrollingElement
document.scrollingElement属性返回文档的滚动元素。也就是说，当文档整体滚动时，到底是哪个元素在滚动。
这个属性返回的文档的根元素document.documentElement（即<html>）。
获取可视区域距离页面顶部的距离
document.scrollingElement.scrollTop;
设置滚动条的距离页面顶面的距离
document.scrollingElement.scrollTop = 0
或者也可以像下面
获取
scrollTop = document.scrollingElement.scrollTop
scrollTop=document.documentElement.scrollTop || document.body.scrollTop
设置
document.documentElement.scrollTop = 0
document.body.scrollTop = 0；
DOM的基本操作(查询、创建、添加，修改，删除)
document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。
getElementsByName，根据name属性
document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素（兼容问题，低版本ie）
document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例）
document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
var el1 = document.querySelector('.myclass');
document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。
elementList = document.querySelectorAll('.myclass');
DOM节点类型(元素和文本)
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
Element：网页的各种HTML标签（比如<body>、<a>等）
Text：标签之间或标签包含的文本 （创建Text）
注释也是节点
通过 nodeType属性可以查看类型
如果节点是一个元素节点，nodeType 属性返回 1。
如果节点是属性节点, nodeType 属性返回 2。
如果节点是一个文本节点，nodeType 属性返回 3。
如果节点是一个注释节点，nodeType 属性返回 8
文档碎片 document.createDocumentFragment() 作为容器使用，可以避免频繁操作dom
