你不容错过的JavaScript高级语法(BOM, DOM简析)

187 阅读6分钟

下面一篇文章将整体分析一下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"))

image.png

location

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

常见的属性有哪些呢?

  • href: 当前window对应的超链接URL, 整个URL。
  • protocol: 当前的协议。
  • host: 主机地址。(包括主机名和端口号)
  • hostname: 主机地址(不带端口)。
  • port: 端口。
  • pathname: 路径;
  • search: 查询字符串;
  • hash: 哈希值;
  • username:URL中的username(很多浏览器已经禁用);
  • password:URL中的password(很多浏览器已经禁用); 我们会发现location其实是URL的一个抽象实现: image.png 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页面。 image.png 由于所有元素都继承自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/…