BOM-DOM

cocoCola91667
96 阅读10分钟

认识BOM

JavaScript有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对应的对象模型（BOM，Browser Object Model）。我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。

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

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

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

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

window全局对象

在浏览器中，window对象就是之前经常提到的全局对象，也就是我们之前提到过GO对象：

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

通过var声明的变量、全局提供的类和方法：

这些用法是我们之前讲过的，并且也是作为JavaScript语言本身所拥有的一些特性。那么接下来我们来看一下作为窗口对象，它拥有哪些特性。

window窗口对象

事实上window对象上肩负的重担是非常大的：

  • 第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）；
  • 第二：包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）；
  • 第三：包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）；
  • 第四：window是个对象，继承于Window类，Window类继承于EventTarget类，所以还包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法；

那么这些大量的属性、方法、事件在哪里查看呢？MDN文档：developer.mozilla.org/zh-CN/docs/…

查看MDN文档时，我们会发现有很多不同的符号，这里我解释一下是什么意思：

  • 删除符号：表示这个API已经废弃，不推荐继续使用了；

  • 点踩符号：表示这个API不属于W3C规范，某些浏览器有实现（所以兼容性的问题）；

  • 实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题；

window常见的属性

window常见的方法

window常见的事件

EventTarget类

window对象继承于EventTarget类，所以会继承其中的属性和方法：

  • addEventListener：注册某个事件类型以及事件处理函数；
  • removeEventListener：移除某个事件类型以及事件处理函数；

  • dispatchEvent：派发某个事件类型到EventTarget上；

自己派发事件，自己监听。

默认事件监听：developer.mozilla.org/zh-CN/docs/…

Location对象常见的属性

location对象用于表示window上当前链接到的URL信息。常见的属性有哪些呢？

  • href: 当前window对应的超链接URL，是整个URL；
  • protocol: 当前的协议；
  • host: 主机地址；
  • hostname: 主机地址(不带端口)；
  • port: 端口；
  • pathname: 路径；
  • search: 查询字符串；
  • hash: 哈希值；
  • username：URL中的username（很多浏览器已经禁用）；
  • password：URL中的password（很多浏览器已经禁用）；

Location对象常见的方法

location其实是URL的一个抽象实现：

location有如下常用的方法：

  • assign()：赋值一个新的URL，并且跳转到该URL中；
  • replace()：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）；
  • reload()：重新加载页面，可以传入一个Boolean类型。如果传入true，会强制刷新，如果传入false会先检查缓存，缓存有使用缓存，否则重新加载

history对象常见属性和方法

history对象允许我们访问浏览器曾经的会话历史记录。

有两个属性：

  • length：会话中的记录条数；
  • state：当前保留的状态值；

有五个方法：

  • back()：返回上一页，等价于history.go(-1)；
  • forward()：前进下一页，等价于history.go(1)；
  • go()：加载历史中的某一页；
  • pushState()：打开一个指定的地址，不会向服务端请求资源，这时候history.state就有值了
  • replaceState()：打开一个新的地址，并且使用replace；

认识DOM和架构

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

JavaScript如何操作元素呢？通过Document Object Model（DOM，文档对象模型）。

DOM给我们提供了一系列的模型和对象，让我们可以方便的来操作Web页面。

  • Document很简单，就是文档树模型
  • Element就是元素
  • CharacterData字符数据，就是标签里面的文本，或者注释
  • Attr，元素的属性

EventTarget类

因为都继承自EventTarget，所以也可以使用EventTarget的方法：

Node节点

所有的DOM节点类型都继承自Node接口。

developer.mozilla.org/zh-CN/docs/…

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

  • nodeName：node节点的名称。
  • nodeType：可以区分节点的类型。
  • nodeValue：node节点的值；
  • childNodes：所有的子节点；
const divEl = document.querySelector("#box")
const spanEl = document.querySelector(".content")

// 常见的属性
console.log(divEl.nodeName, spanEl.nodeName)
console.log(divEl.nodeType, spanEl.nodeType)
console.log(divEl.nodeValue, spanEl.nodeValue)

// childNodes
const spanChildNodes = spanEl.childNodes
const textNode = spanChildNodes[0]
console.log(textNode.nodeValue)


// 常见的方法
const strongEl = document.createElement("strong")
strongEl.textContent = "我是strong元素"
divEl.appendChild(strongEl)

// 注意事项: document对象添加元素只能添加到body里面
document.body.appendChild(strongEl)

Document

Document节点表示的整个载入的网页，我们来看一下常见的属性和方法：

// 常见的属性
console.log(document.body)
console.log(document.title)
document.title = "Hello World"

console.log(document.head)
console.log(document.children[0])

console.log(window.location)
console.log(document.location)
console.log(window.location === document.location) // true 是同一个对象

// 常见的方法
// 创建元素
const imageEl = document.createElement("img")
const imageEl2 = new HTMLImageElement() // 两种方式是一样的

// 获取元素
const divEl1 = document.getElementById("box")
const divEl2 = document.getElementsByTagName("div")
const divEl3 = document.getElementsByName("title")
const divEl4 = document.querySelector(".content")
const divEl5 = document.querySelectorAll(".content")

Element

我们平时创建的div、p、span等元素在DOM中表示为Element元素，我们来看一下常见的属性和方法：

const divEl = document.querySelector("#box")

// 常见的属性
console.log(divEl.id)
console.log(divEl.tagName)
console.log(divEl.children)
console.log(divEl.className)
console.log(divEl.classList)
console.log(divEl.clientWidth)
console.log(divEl.clientHeight)
console.log(divEl.offsetLeft)
console.log(divEl.offsetTop)

// 常见的方法
const value = divEl.getAttribute("age")
console.log(value)
divEl.setAttribute("height", 1.88)

认识事件监听

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

事实上还有一种需要和浏览器经常交互的事情就是事件监听：浏览器在某个时刻可能会发生一些事件，比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列的事件；我们需要以某种方式（代码）来对其进行响应，进行一些事件的处理；

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

如何进行事件监听呢？

  • 事件监听方式一：在script中直接监听；
  • 事件监听方式二：通过元素的on来监听事件；
  • 事件监听方式三：通过EventTarget中的addEventListener来监听；
function divClick() {
  console.log("div元素被点击2")
}

const divEl = document.querySelector(".box")

// DOM0的方式,多次设置会被覆盖
divEl.onclick = function() {
  console.log("div元素被点击3")
}

// DOM2的方式,多次设置都会触发,经常使用
divEl.addEventListener("click", () => {
  console.log("div元素被点击4")
})
divEl.addEventListener("click", () => {
  console.log("div元素被点击5")
})
divEl.addEventListener("click", () => {
  console.log("div元素被点击6")
})

认识事件流的由来

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

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

事件捕获和事件冒泡

我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（EventBubble）。事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（EventCapture）；

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

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

那么我们如何去监听事件捕获的过程呢？使用addEventListener，第三个参数传true。

冒泡和捕获的顺序

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

const spanEl = document.querySelector(".span")
const divEl = document.querySelector(".container")

spanEl.addEventListener("click", () => {
  console.log("事件冒泡:span元素被点击了")
})

divEl.addEventListener("click", () => {
  console.log("事件冒泡:div元素被点击了")
})

document.body.addEventListener("click", () => {
  console.log("事件冒泡:body元素被点击了")
})

// 再次监听
spanEl.addEventListener("click", (event) => {
  console.log("事件捕获:span元素被点击了")
}, true)

divEl.addEventListener("click", () => {
  console.log("事件捕获:div元素被点击了")
}, true)

document.body.addEventListener("click", (event) => {
  console.log("事件捕获:body元素被点击了")
}, true)

可以发现，会先触发事件捕获，再触发事件冒泡，就像扔一个石头到河里，扔的过程是捕获，激起浪花是冒泡，顺序是捕获阶段：body -> div，冒泡阶段：div -> body。

事件对象event

当一个事件发生时，就会有和这个事件相关的很多信息：比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息。

那么这些信息会被封装到一个Event对象中，该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作。

常见的属性：

  • type：事件的类型；
  • target：当前事件发生的元素；
  • currentTarget：当前处理事件的元素；
  • offsetX、offsetY：点击元素的位置；

常见的方法：

  • preventDefault：取消事件的默认行为；
  • stopPropagation：阻止事件传递；

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

const spanEl = document.querySelector(".span")

spanEl.addEventListener("click", (event) => {
  console.log("span元素被点击:", event)
  console.log("事件的类型:", event.type) // click
  console.log("事件的元素:", event.target, event.currentTarget) // span span
  console.log("事件发生的位置:", event.offsetX, event.offsetY)
})

const divEl = document.querySelector(".container")
divEl.addEventListener("click", (event) => {
  console.log("div元素被点击:", event.target, event.currentTarget) // span div
})

// 常见的方法
// preventDefault 阻止默认行为,比如a标签的默认跳转
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
  event.preventDefault()
})

注意： 对于stopPropagation，Propagation是繁殖的意思，好多人都以为stopPropagation是阻止事件冒泡，其实无论是捕获还是冒泡都会阻止事件继续传递，上面我们说了，捕获阶段：body -> div，冒泡阶段：div -> body，其实在这个事件链中的任何一个事件中添加event.stopPropagation()，都会阻止事件继续传递。

e.target、e.currentTarget 的区别

  • e.target是事件触发的元素，也就是真正点击的元素。
  • e.currentTarget 是绑定这个事件处理函数的元素。

一般情况下，e.target和e.currentTarget一样的，只有事件冒泡的时候才不一样，比如div里面包含span，div和span都有点击事件处理，点击span的时候，span的事件处理函数中的e.target和e.currentTarget都是span，div的事件处理函数中的e.target是span，e.currentTarget是div。

avatar
文章
阅读
粉丝