下面一篇文章将整体分析一下BOM, DOM。这篇文章不是主要将知识，而是整体分析一下。

BOM

认识BOM

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

我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。

BOM主要包括以下的对象模型：

• window：包括全局属性、方法，控制浏览器窗口相关的属性、方法。

• location：浏览器连接到的对象的位置（URL）。

• history：操作浏览器的历史。

• document：当前窗口操作文档的对象。

window

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

• 全局对象

• 我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global。

• 在浏览器中就是window对象。 在浏览器中，window对象就是作为GO对象：

• 比如在全局通过var声明的变量，会被添加到GO中，也就是会被添加到window上。

• 比如window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等。

• 浏览器窗口对象

• 作为浏览器窗口时，提供了对浏览器操作的相关的API。 事实上window对象上肩负的重担是非常大的：

• 包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）。

• 包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）。

• 包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）。

• 包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法。 下面来介绍一下dispatchEvent方法：

• 他就是可以派发我们通过Event自定义的事件。然后通过addEventListener监听事件。

window.addEventListener("customEvent", () => {
      console.log("监听到了customEvent事件")
    })
    window.dispatchEvent(new Event("customEvent"))

location

Location对象用于表示window上当前链接到的URL信息。

常见的属性有哪些呢？

• href: 当前window对应的超链接URL, 整个URL。

• protocol: 当前的协议。

• host: 主机地址。（包括主机名和端口号）

• hostname: 主机地址(不带端口)。

• port: 端口。

• pathname: 路径；

• search: 查询字符串；

• hash: 哈希值；

• username：URL中的username（很多浏览器已经禁用）；

• password：URL中的password（很多浏览器已经禁用）； 我们会发现location其实是URL的一个抽象实现：

location有如下常用的方法：

• assign：赋值一个新的URL，并且跳转到该URL中。其实直接赋值href也可以。

• replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）。

• reload：重新加载页面，可以传入一个Boolean类型。

• true: 表示强制刷新页面。清缓存。

• false：不强制刷新。

history

history对象允许我们访问浏览器曾经的会话历史记录。 有两个属性：

• length：会话中的记录条数。

• state：当前保留的状态值。 有五个方法：

• back()：返回上一页，等价于history.go(-1)。

• forward()：前进下一页，等价于history.go(1)。

• go()：加载历史中的某一页。

• pushState()：打开一个指定的地址。

• replaceState()：打开一个新的地址，并且使用replace。他的使用请访问，vue-router。实现前端路由。

DOM

认识DOM

浏览器是用来展示网页的，而网页中最重要的就是里面各种的标签元素，JavaScript很多时候是需要操作这些元素的。

JavaScript如何操作元素呢？

通过Document Object Model（DOM，文档对象模型）。DOM给我们提供了一系列的模型和对象，让我们可以方便的来操作Web页面。

由于所有元素都继承自EventTarget，所以都具有它上面的方法。

Node

所有的DOM节点类型都继承自Node接口。developer.mozilla.org/zh-CN/docs/…

Node有几个非常重要的属性：

• nodeName：node节点的名称。

• nodeType：可以区分节点的类型。为number类型。

• nodeValue：node节点的值。只能获取文本节点的值。

• childNodes：所有的子节点。

事件监听

JavaScript脚本和浏览器之间交互时，浏览器给我们提供的BOM、DOM等一些对象模型。

事实上还有一种需要和浏览器经常交互的事情就是事件监听：

浏览器在某个时刻可能会发生一些事件，比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列的事件。

我们需要以某种方式（代码）来对其进行响应，进行一些事件的处理。在Web当中，事件在浏览器窗口中被触发，并且通过绑定到某些元素上或者浏览器窗口本身，那么我们就可以给这些元素或者window窗口来绑定事件的处理程序，来对事件进行监听。

如何进行事件监听呢？

• 事件监听方式一：在script中直接监听。

<div class="box" onclick="console.log('div元素被点击')"></div>
  <div class="box" onclick="divClick()"></div>

• 事件监听方式二：通过元素的on来监听事件。这种在同一个dom中监听相同的事件会发生覆盖。

divEl.onclick = function() {
      console.log("div元素被点击")
    }

• 事件监听方式三：通过EventTarget中的addEventListener来监听。这个监听相同事件不会发生覆盖。

divEl.addEventListener("click", () => {
  console.log("div元素被点击")
})

事件流

事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？

我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身。这是因为我们的HTML元素是存在父子元素叠加层级的。

事件冒泡和事件捕获

• 默认情况下事件是从最内层向外依次传递的顺序，这个顺序我们称之为事件冒泡（EventBubble）。即由具体的元素到不具体的元素。

• 事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）。由不具体的元素到具体的元素。

为什么会产生两种不同的处理流呢？

• 这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题，但是他们采用了完全相反的事件流来对事件进行了传递。

• IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式。

那么我们如何去监听事件捕获的过程呢？

通过控制addEventListener的第三个参数。默认为false。false: 表示冒泡，true表示捕获。

如果我们同时有事件冒泡和时间捕获的监听，那么会优先监听到事件捕获的：他是先捕获后冒泡的。

事件对象event

当一个事件发生时，就会有和这个事件相关的很多信息：

• 比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息。

• 那么这些信息会被封装到一个Event对象中。

• 该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作。

常见的属性：

• type：事件的类型。

• target：当前事件发生的元素。就是绑定事件的元素。

• currentTarget：当前处理事件的元素。就是触发事件的元素。

• offsetX、offsetY：点击元素的位置。

常见的方法：

• preventDefault：取消事件的默认行为。

• stopPropagation：阻止事件的进一步传递。

事件类型：developer.mozilla.org/zh-CN/docs/…