前言

ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

DOM/BOM架构

概述

JavaScript运行在浏览器

BOM就是连接JavaScript代码和浏览器的桥梁，而DOM就是用来操作各种标签元素的。

• BOM包括 window、history、location、document ...
  
• DOM包括 Document（整个文档）、Element（标签元素）、CharacterData（字符数据）、Attr（属性），这些元素又可以继续往下划分。

• Document 又可以分为HTMLDocument（就是我们定义的html文件）和XMLDocument(XML文件，安卓会用，前端用不到)
  
• Element 可以划分为 HTMLElement（表示 HTML 中的一个元素，比如div），HTMLElement又可以划分为HTMLDIvElement 和 HTMLImageElement 故名思义
  
• CharacterData 可以划分为text(text标签)和Comment(注释)
  
• Attr 可以理解我们元素的class属性id属性以及值
  

继承关系

• 其中DOM元素、window对象都继承自EventTarget，所以它们都有EventTarget上的实例方法而document是HTMLDocument的实例对象
• 所以window上是可以绑定事件，监听事件，分发事件的
• 其中DOM 中的所有元素节点都继承自EventTarget接口，所以DOM中任意节点可以绑定事件，监听事件，分发事件

我们可以在浏览器中打印它的原型属性

通过下图我们可以看出，window继承Window，Window继承自EventTarget

通过下图我们可以看出，document继承HtmlDocument，HtmlDocument继承自Document,Document继承自Node节点，Node节点继承自EventTarget

顺便说一句：EventTarget继承自Object,Object继承自null

EventTarget 接口

EventTarget 是一个 DOM 接口，由可以接收事件、并且可以创建侦听器的对象实现。

Element，document 和 window 是最常见的 event targets

EventTarget有三个原型方法，在window和DOM元素上都可以使用

• addEventListener 给元素绑定事件
  
• removeEventListener 移除元素绑定的事件
  
• dispatchEvent 派发事件
  

BOM

认识BOM

• JavaScript有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对 应的对象模型(BOM，Browser Object Model)。
• BOM主要包括一下的对象模型:

• window:包括全局属性、方法，控制浏览器窗口相关的属性、方法;
  
• location:浏览器连接到的对象的位置(URL);
  
• history:操作浏览器的历史;
  
• document:当前窗口操作文档的对象;
  

• window对象在浏览器中有两个身份:

• 身份一:全局对象。我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global;在浏览器中就是window对象;
  
• 身份二:浏览器窗口对象。作为浏览器窗口时，提供了对浏览器操作的相关的API;
  

Window全局对象

在浏览器中，window对象就是之前经常提到的全局对象

• 比如在全局通过var声明的变量，会被添加到全局环境变量中，也就是会被添加到window上;
• 比如window默认给我们提供了全局的函数和类:setTimeout、Math、Date、Object等;

var message = 'hello'
function foo(){
    console.log("foo")
}
console.log(window.message)
window.foo()
 window.setTimeout(()=>{
     console.log('setTimout')
 })
 const obj = new window.Object()
 console.log(obj)

Window窗口对象

window是一个复杂的大对象，包含了大量的对象和方法

• 第一:包含大量的属性，localStorage、console、location、history、screenX、scrollX等等(大概60+个属性);
  
• 第二:包含大量的方法，alert、close、scrollTo、open等等(大概40+个方法);
  
• 第三:包含大量的事件，focus、blur、load、hashchange等等(大概30+个事件);
  
• 第四:包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法;
  

参考地址：MDN文档:developer.mozilla.org/zh-CN/docs/…

常见的属性

// screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。
console.log(window.screenX)
console.log(window.screenY)
// 监听滚动
window.addEventListener("scroll", () => {
   console.log(window.scrollX, window.scrollY)
})
// 获取窗口的宽度与高度：
console.log(window.outerHeight)
console.log(window.innerHeight)

常见的方法

const scrollBtn = document.querySelector("#scroll")
scrollBtn.onclick = function() {
    //1.scrollTo
    window.scrollTo({ top: 2000 })
    //2.close
    window.close()
    // 3.open
    window.open("http://www.baidu.com", "_self")
}

常见的事件

// 整个页面以及所有资源加载完成
window.onload = function() {
  console.log("window窗口加载完毕~")
}
window.onfocus = function() {
  console.log("window窗口获取焦点~")
}
window.onblur = function() {
  console.log("window窗口失去焦点~")
}
//hash 改变
const hashChangeBtn = document.querySelector("#hashchange")
hashChangeBtn.onclick = function() {
  location.hash = "aaaa"
}
window.onhashchange = function() {
  console.log("hash发生了改变")
}