浏览器的DOM和BOM

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

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

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

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

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

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

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

一. window对象

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

• 身份一：全局对象。

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

  • 在浏览器中就是window对象；

• 身份二：浏览器窗口对象。

  • 作为浏览器窗口时，提供了对浏览器操作的相关的API；

1.1. global全局对象

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

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

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

通过var声明的变量：

var message = "Hello World"
function foo() {
  console.log("foo function")
}

console.log(window.message)
window.foo()

全局提供的类和方法：

window.setTimeout(() => {
  console.log("setTimeout")
}, 1000)

const obj = new window.Object()
console.log(obj)

const date = new window.Date()
console.log(date)

这些用法是我们之前讲过的，并且也是作为JavaScript语言本身所拥有的一些特性。

那么接下来我们来看一下作为窗口对象，它拥有哪些特性。

1.2. window窗口对象

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

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

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

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

• 第四：包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEventListener方法；

那么这些大量的属性、方法、事件在哪里查看呢？

• MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window

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

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

删除符号

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

点踩符号

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

  
  实验符号

1.2.1. 常见的属性

// 浏览器高度
console.log(window.outerHeight)
console.log(window.innerHeight)

console.log("screenX:", window.screenX)
console.log("screenY:", window.screenY)

// 监听
window.addEventListener("scroll", (event) => {
  console.log(window.scrollY)
  console.log(window.scrollX)
})

1.2.2. 常见的方法

// alert("Hello World")

// close方法
const closeBtn = document.querySelector("#close")
closeBtn.onclick = function() {
  close()
}

// moveTo
const scrollBtn = document.querySelector("#scroll")
scrollBtn.onclick = function() {
  scrollTo({ top: 1000 })
}

// 打开新创建
const openBtn = document.querySelector("#open")
openBtn.onclick = function() {
  open("./about.html", "_self")
}

1.2.3. 常见的事件

window.onfocus = function() {
  console.log("窗口获取到焦点")
}

window.onblur = function() {
  console.log("窗口失去了焦点")
}

// 整个页面以及所有的资源都加载完成
window.onload = function() {
  console.log("页面加载完成")
}

// hash改变
const hashBtn = document.querySelector("#hash")
hashBtn.onclick = function() {
  location.hash = "aaa"
}
window.onhashchange = function() {
  console.log("hash被修改了")
}

1.2.4. EventTarget

Window继承自EventTarget，所以会继承其中的属性和方法：

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

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

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

const scrollHandler = () => {
  console.log("window发生了滚动~")
}
const clickHandler = () => {
  console.log("window发生了点击~")
}

window.addEventListener("scroll", scrollHandler)
window.addEventListener("click", clickHandler)

const removeBtn = document.querySelector("#removeEvent")
removeBtn.onclick = function() {
  console.log("-----")
  window.removeEventListener("click", clickHandler)
  window.removeEventListener("scroll", scrollHandler)
}

自己来派发事件：

const dispatchBtn = document.querySelector("#dispatch")

dispatchBtn.onclick = function() {
  window.dispatchEvent(new Event("coderwhy"))
}

window.addEventListener("coderwhy", () => {
  console.log("监听到了coderwhy事件")
})

默认事件监听：

• https://developer.mozilla.org/zh-CN/docs/Web/Events

1.3. location位置

1.3.1. 常见的属性

比如我们有一个地址：

• http://coderwhy:abc@127.0.0.1:5500/27_%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1/index.html?name=why&age=18#abc

// Location类型的对象
console.log(window.location)

// href: 当前window对应的超链接URL, 整个URL
console.log(location.href)

// protocol: 当前的协议
console.log(location.protocol)

// host: 主机地址
console.log(location.host)

// hostname: 主机地址(不带端口)
console.log(location.hostname)

// port: 端口
console.log(location.port)

// pathname: 路径
console.log(location.pathname)

// search: 查询字符串
console.log(location.search)

// hash: 
console.log(location.hash)

// username:
console.log(location.username)

// password
console.log(location.password)

我们会发现location其实是URL的一个抽象实现：

URL解析

1.3.2. 常见的操作

location有如下常用的方法：

• assign：赋值一个新的URL，并且跳转到该URL中；

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

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

const locationBtn = document.querySelector("#location")
locationBtn.onclick = function() {
  // location.assign("http://www.baidu.com")
  // location.replace("http://www.baidu.com")
  location.reload()
}

另外我们修改location的很多属性，也会造成浏览器重新加载地址：

// location.href = "http://www.baidu.com"
// location.host = "www.baidu.com:80"

1.4. history属性

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

有两个属性：

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

• state：当前保留的状态值；

有五个方法：

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

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

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

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

• replaceState()：打开一个新的地址，并且使用replace；

console.log(history.length)
console.log(history.state)

const jumpBtn = document.querySelector("#jump")
const backBtn = document.querySelector("#back")

jumpBtn.onclick = function() {
  history.pushState({name: "why"}, "11", "aaa")
  console.log(history.length, history.state)
}

backBtn.onclick = function() {
  history.back()
  console.log(history.length, history.state)
}

二. document对象

2.1. 整体架构

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

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

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

DOM模型关系图

当我们有一个页面时，这个页面就可以用上面的模式来表示出来：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div>
    <!-- 我是注释 -->
    <h2>哈哈哈</h2>
    <strong>呵呵呵</strong>
  </div>
</body>
</html>

这个网页会形式一个对象树，这些对象都是我们上面的模型所创建出来的：

• 比如整个的页面是HTMLDocument对象；

• 比如body、div、h2等都是HTMLElement对象；

• 比如哈哈哈、呵呵呵文本都是Text对象；

• 比如我是注释都是Comment对象；

• 比如其中的属性是Attr对象；

2.2. EventTarget

document.addEventListener("click", () => {
  console.log("ducument被点击")
})


const boxDiv = document.querySelector("#box")
boxDiv.addEventListener("click", () => {
  console.log("box被点击")
})

2.3. Node节点

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

• https://developer.mozilla.org/zh-CN/docs/Web/API/Node

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

nodeName：node节点的名称。

image-20211112164535329

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

image-20211112164303286

childNodes

firstChild

2.4. document

// title
document.title = "Coderwhy"

// body/head
console.log(document.body)
console.log(document.head)

// children
console.log(document.children)

// location
console.log(document.location)
console.log(window.location === document.location)

// 方法
// 1.创建和添加createElement
const h2El = document.createElement("h2")
h2El.textContent = "Hello World"
document.body.appendChild(h2El)

// 2.删除元素
setTimeout(() => {
  document.body.removeChild(h2El)
}, 2000);

// 3.获取元素
const el1 = document.getElementsByName("abc")
const el2 = document.getElementsByTagName("div")
console.log(el1, el2)

const el3 = document.querySelector("div")
const el4 = document.querySelectorAll("div")
console.log(el3, el4)

2.5. element

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

// 1.获取子元素
console.log(boxDiv.children)
console.log(boxDiv.childNodes)

// 2.tagName
console.log(boxDiv.tagName)

// 3.id/class
console.log(boxDiv.id)
console.log(boxDiv.className)
console.log(boxDiv.classList)

// 4.clientWidth/clientHeight/clientLeft/clientTop
console.log(boxDiv.clientWidth, boxDiv.clientHeight)
// 边框宽度和高度
console.log(boxDiv.clientLeft, boxDiv.clientTop)
// offsetWidth/offsetHeight
console.log(boxDiv.offsetLeft, boxDiv.offsetTop)

// 方法(操作属性)
const attr1 = boxDiv.getAttribute("name")
console.log(attr1)

boxDiv.setAttribute("height", "1.88")

三. 事件处理

3.1. 事件监听

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

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

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

• 我们需要以某种方式（代码）来对其进行响应，进行一些事件的处理；

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

事件监听方式一：

<button onclick="console.log('按钮1被点击了')">按钮1</button>
  <button onclick="btnClick()">按钮2</button>

  <script>
    function btnClick() {
      console.log("按钮2被点击了")
    }
  </script>

事件监听方式二：

const btn3 = document.querySelector("#btn3")
btn3.onclick = function() {
  console.log("按钮3被点击了")
}

事件监听方式三：

btn3.addEventListener("click", () => {
  console.log("按钮3被点击了")
})

3.2. 事件流

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

• 我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；

• 这是因为我们的HTML元素是存在父子元素叠加层级的；

• 比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的；

<body>
  <div class="box">
    <span class="span">我是span元素</span>
  </div>
</body>

我们可以监听这些元素的点击：

document.body.addEventListener("click", () => {
  console.log("body被点击")
})

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

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

spanEl.addEventListener("click", () => {
  console.log("span被点击")
})

我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）。

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

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

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

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

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

// 事件捕获的监听
document.body.addEventListener("click", () => {
  console.log("body被点击")
}, true)

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

spanEl.addEventListener("click", () => {
  console.log("span被点击")
}, true)

并且会发现，如果我们同时有事件冒泡和时间捕获的监听，那么会优先监听到事件捕获的：

事件捕获阶段: body被点击
事件捕获阶段: div被点击
事件捕获阶段: span被点击
事件冒泡阶段: span被点击
事件冒泡阶段: div被点击
事件冒泡阶段: body被点击

image-20211115110034117

3.3. 事件对象

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

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

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

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

常见的属性：

• type：事件的类型；

• target：当前事件发生的元素；

• currentTarget：当前处理事件的元素；

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

spanEl.addEventListener("click", (event) => {
  console.log("事件冒泡阶段: span被点击:", event)
  console.log("事件的类型:", event.type)
  console.log("点击的元素:", event.target, event.currentTarget)
  console.log("点击的位置:", event.offsetX, event.offsetY)
  console.log("点击的数据:", event.target.dataset)
})

常见的方法：

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

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

// 阻止a元素的默认行为
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
  event.preventDefault()
  window.open(aEl.href)
})

// 事件捕获的监听
document.body.addEventListener("click", (event) => {
  console.log("事件捕获阶段: body被点击")
}, true)

divEl.addEventListener("click", (event) => {
  console.log("事件捕获阶段: div被点击")
  event.stopPropagation()
}, true)

spanEl.addEventListener("click", () => {
  console.log("事件捕获阶段: span被点击")
}, true)

事件类型：https://developer.mozilla.org/zh-CN/docs/Web/Events