BOM

DOM事件

浏览器对象模型（Browser ）,它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了相应的属性和方法

BOM缺乏标准，javascript标准是ecma，dom的标准组织是w3c

window对象是浏览器的顶级对象，它具有双重角色

• 它是js访问浏览器窗口的一个接口
• 它是一个全局变量，定义在全局作用域的变量，函数都会变成window对象的属性和方法，在调用的时候可以省略window
• window.name是一个特殊属性，不用name来命名

属性

closed	返回窗口是否已被关闭。

document	对 Document 对象的只读引用

history	对 History 对象的只读引用

innerHeight	返回窗口的文档显示区的高度

innerWidth	返回窗口的文档显示区的宽度

outerHeight	返回窗口的外部高度，包含工具条与滚动条

outerWidth	返回窗口的外部宽度，包含工具条与滚动条

screenLeft	返回相对于屏幕窗口的x坐标

screenTop	返回相对于屏幕窗口的y坐标

screenX	返回相对于屏幕窗口的x坐标

screenY	返回相对于屏幕窗口的y坐标

location	用于窗口或框架的 Location 对象

navigator	对 Navigator 对象的只读引用

onload 指定所有配置都加载完成时(图片例外)调用的函数. 

pageXOffset	返回当前页面相对于窗口显示区左上角的 X 位置(body横向滚动的距离)

pageYOffset	返回当前页面相对于窗口显示区左上角的 Y 位置(body纵向滚动的距离)

screen	对 Screen 对象的只读引用

onload加载页面

• window.onload = function() {};
  window.addEventListener('load',function(){
      //代码块
  });
  
  

  window.onload是窗口加载事件，当文档全部加载完成的时候（包括文本，标签，图像，css，文件等）

  注意

  1. 有了load就可以把代码写在页面元素的上方
  2. window.load传统注册方式只能写一次，如果是多次写，则只执行最后一次
  3. 如果是window.addEventListener()就没有限制

• document.addEventListener('DOMContentLoaded',function(){})
  
  

  DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式，图片等 ie9以上支持

如果页面图片很多，onload触发可能需要花费更多的事件，影响用户体验，此时用DOMContentLoaded事件比较合适

resize窗口调整

window.onresize = function() {}

window.addEventListener('resize',function(){})

注意

1. 只要窗口大小发生变化像素变化，就会触发事件
2. 我们经常利用这个事件完成响应式布局，**window.innerWidth当前屏幕的宽度

方法

alert()	显示带有一段消息和一个确认按钮的警告框。

close()	关闭浏览器窗口。

confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。

open(url,打开方式,新窗口配置,BOOL)	打开一个新的浏览器窗口

//4个参数都可选(一般就填第一个参数)

//url:新窗口地址  打开方式:blank(默认),parent,self,top  配置(各种):一般默认 BOOL:新窗口在历史记录里面有,要不要替换 

print()	打印当前窗口的内容。

prompt(tishi,value)	显示可提示用户输入的对话框。 

scrollBy()	按照指定的像素值来滚动内容(前提是你的有滚动条:内容够多)

scrollTo()	把内容滚动到指定的坐标。(前提是你的有滚动条:内容够多)

setInterval(callback,times)	按照指定的周期（以毫秒计）来调用函数

setTimeout(callback,times)	在指定的毫秒数后调用函数

clearInterval()	取消由 setInterval() 设置的 timeout。

clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

计时器

• window.setTimeout(调用函数,时间)
  // 里面的函数又叫回调函数，因为这个函数需要等待时间，因此叫回调函数
  var timeoutID = scope.setTimeout(code[, delay]);
  // code可以是字符串，但不推荐使用，和eval()一样，会有安全问题
  
  

  setTimeout()方法设置一个定时器，该定时器在到期后调用函数，只调用一次

  注意

  1. window可以省略
  2. 这个调用函数可以直接写函数名，写函数或是次啊用字符串格式'函数名()'三种方式，不建议使用第三种
  3. 默认延迟时间为0，时间单位是毫秒，一秒等于一千毫秒
  4. 因为定时器有很多，所以经常给定时器赋值一个标识符

• window.clearTimeout(timeoutID)
  
  

  clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器

  注意

  1. window可以省略
  2. 里面的参数就是定时器的标识符

// 定时器生成和取消
	<button>停止</button>
    <script>
        var time1 = setTimeout(function(){
            console.log('over break')
        },5000);
        var button = document.querySelector('button');
        button.addEventListener('click',function(){
            clearTimeout(time1);
        })
    </script>

• window.setInterval(调用函数,时间)
  
  

  重复调用很多次

  注意

  1. window可以省略
  2. 这个调用函数可以直接写函数名，写函数或是次啊用字符串格式'函数名()'三种方式，不建议使用第三种
  3. 默认延迟时间为0，时间单位是毫秒，一秒等于一千毫秒
  4. 因为定时器有很多，所以经常给定时器赋值一个标识符

• window.clearInterval(intervalID)
  
  

  clearInterval()方法取消了先前通过调用setInterval()建立的定时器

  注意

  1. window可以省略
  2. 里面的参数就是计时器的标识符

元素对象

• element.offsetLeft:是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。
• element.offsetTop:是一个只读属性，返回当前元素相对于 offsetParent 节点上边界的偏移像素值。
• element.offsetParent:元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素

<style>
        img {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

    <img src="../theday11/images/下载.png" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('keydown',function(event) {
            var event = event || window.event; // 兼容问题，火狐浏览器找不到event的问题
            var award = event.keyCode;
            // console.log(img.offsetParent);
            switch(award) {
                case 37 : img.style.left = img.offsetLeft - 10 + 'px'; break;
                case 38 : img.style.top = img.offsetTop - 10 + 'px'; break;
                case 39 : img.style.left = img.offsetLeft + 10 + 'px'; break;
                case 40 : img.style.top = img.offsetTop + 10 + 'px'; break;
                default : break;
            }
        })
    </script>

location对象

当前页面的url

属性:

hash	返回一个URL的锚部分//192.168.1.102:8081?name=jack&pwd=123#page1

host	返回一个URL的主机名和端口

hostname	返回URL的主机名

href	返回完整的URL

pathname	返回的URL路径名。

port	返回一个URL服务器使用的端口号

protocol	返回一个URL协议

search	返回一个URL的查询部分

方法:

assign(url)	载入一个新的文档

reload()	重新载入当前文档

replace(url)	用新的文档替换当前文档

window对象提供了location属性用于获取或设置窗体的url,并且可以用于解析url,返回的是一个对象，也称为location对象

url统一资源定位符（Uniform Resource Locator URL）是互联网标准资源的地址。互联网上的每个文档都有一个唯一的url，它包含的信息指出文件的位置以及浏览器该如何处理它

url语法

protocol://host[:port]/path/[?auery]#fragment

protocol:通信协议，常见的http ftp matio等

host:主机（域名）

port:端口 可选 省略时使用默认端口

path:路径由零或多个/符号隔开的字符串，一般来表示主机上一个目录或文件地址

query:参数 以键值对的形式通过$符号分割

fragment:片段 #后买你内容常见于链接 锚点

location对象属性

• location.href:获取或设置整个url
• location.host:返回主机
• location.port:返回端口号
• location.pathname:返回路径
• location.search:返回参数
• location.hash:返回片段

	<button>跳转</button>
    <script>
        var button = document.querySelector('button');
        var body = document.querySelector('body');
        function outTime(time) {
            var time1 = setInterval(function() {
                if(time == 0) {
                    clearInterval(time1);
                    location.href = 'http://www.baidu.com';   // 核心
                }
                body.innerHTML = '倒计时' + time;
                time--;
            }, 1000);
        }

        button.onclick = function() {
            var time = 5;
            outTime(time);
        }
    </script>

location对象方法

• location.assign()：跳转页面，记录历史，所以可以返回以前的页面（也称为重定向页面）
• location.replace()：跳转页面，不记录历史
• location.reload()：重新刷新页面，相当于刷新按钮或f5，如果参数是true，则是强制刷新 ctrl+f5

navigator对象

属性:

appCodeName	返回浏览器的代码名

appName	返回浏览器的名称

appVersion	返回浏览器的平台和版本信息

cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值

platform	返回运行浏览器的操作系统平台

userAgent	返回由客户机发送服务器的user-agent 头部的值

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent,该属性可以返回由客户端发送服务器的user-agent头部的值

if(navigator.userAgent.math(/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|windows Phone)/i)) {	
    window.location.href = '';		// 手机
} else {
    window.location.href = '';		// 电脑
}

history对象

属性:

length返回访问历史列表中的网址数

back()	加载 history 列表中的前一个 URL

forward()	加载 history 列表中的下一个 URL

go(number|url)加载 history列表中的某个具体页面//负数后退,正数前进

• history.back()：后退功能
• history.forward()：前进功能
• go(参数)：前进后退功能，如果参数是1 前进一个页面 后退一个页面

screen

属性:

availHeight	返回屏幕的高度（不包括Windows任务栏）

availWidth	返回屏幕的宽度（不包括Windows任务栏）

height	返回屏幕的总高度

width	返回屏幕的总宽度

pixelDepth	返回屏幕的颜色分辨率（每象素的位数）