BOM-DOM

---

theme: channing-cyan

跟着coderwhy学习

1.认识BOM

• JavaScript有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对应的对象模型(BOM，Browser Object Model)。
  • 我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。
• BOM主要包括一下的对象模型：
  • window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
  • location：浏览器连接到的对象的位置(URL)；
  • history：操作浏览器的历史；
  • document：当前窗口操作文档的对象；
• window对象在浏览器中有两个身份：
  • 身份一：全局对象。
    • 我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；
    • 在浏览器中就是window对象；
  • 身份二：浏览器窗口对象。
    • 作为浏览器窗口时，提供了对浏览器操作的相关的API；

2.Window全局对象

• 在浏览器中，window对象就是之前经常提到的全局对象，也就是我们之前提到过GO对象：
  • 比如在全局通过var声明的变量，会被添加到GO中，也就是会被添加到window上；
  • 比如window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等；
• 通过var声明的变量，全局提供的类和方法： ```js var message = 'mint' var age = 18

window.setTimeout(() => { console.log('setTime') }, 2000)

const obj = new window.Date() console.log(obj); ```

3.Window窗口对象

• 事实上window对象上肩负的重担是非常大的：
  • 第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等(大概60+个属性)；
  • 第二：包含大量的方法，alert、close、scrollTo、open等等(大概40+个方法)；
  • 第三：包含大量的事件，focus、blur、load、hashchange等等(大概30+个事件)；
  • 第四：包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法；
• 那么这些大量的属性、方法、事件在哪里查看呢？
  • MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window
• 查看MDN文档时，我们会发现有很多不同的符号，这里我解释一下是什么意思：
  • 删除符号：表示这个API已经废弃，不推荐继续使用了；
  • 点踩符号：表示这个API不属于W3C规范，某些浏览器有实现(所以兼容性的问题)；
  • 实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题

4.window常见的属性

```js 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) ```

5.window常见的方法

```js const scrollBtn = document.querySelectorAll('#scoll') scrollBtn.onclick = function () { // 1.scrollTo window.scrollTo({ top: 2000 }) }

// // 2.close // // window.close()

// // 3.open // window.open("http://www.baidu.com", "_self") // } ```

6.window常见的时事件

```js window.onload = function() { console.log("window窗口加载完毕~") }

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

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

const hashChangeBtn = document.querySelector("#hashchange") hashChangeBtn.onclick = function() { location.hash = "aaaa" } window.onhashchange = function() { console.log("hash发生了改变") } ```

7.EventTarget

• Window继承自EventTarget，所以会继承其中的属性和方法：
  • addEventListener：注册某个事件类型以及事件处理函数；
  • removeEventListener：移除某个事件类型以及事件处理函数；
  • dispatchEvent：派发某个事件类型到EventTarget上；

```js const clickHandler = () => { console.log("window发生了点击") }

window.addEventListener("click", clickHandler) window.removeEventListener("click", clickHandler)

window.addEventListener("mint", () => { console.log("mint") })

window.dispatchEvent(new Event("mint")) ``` 默认事件监听： https://developer.mozilla.org/zh-CN/docs/Web/Events

8.Location对象常见的属性

• Location对象用于表示window上当前链接到的URL信息。
• 常见的属性有哪些呢？
  • href: 当前window对应的超链接URL, 整个URL；
  • protocol: 当前的协议；
  • host: 主机地址；
  • hostname: 主机地址(不带端口)；
  • port: 端口；
  • pathname: 路径；
  • search: 查询字符串；
  • hash: 哈希值；
  • username：URL中的username(很多浏览器已经禁用)；
  • password：URL中的password(很多浏览器已经禁用)；

9.Location对象常见的方法

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

+ location有如下常用的方法： + assign：赋值一个新的URL，并且跳转到该URL中； + replace：打开一个新的URL，并且跳转到该URL中(不同的是不会在浏览记录中留下之前的记录)； + reload：重新加载页面，可以传入一个Boolean类型； js const locationbtn = document.querySeletor("#location") location.onclick = function() { location.assign("http://www.baidu.com") location.replace("http://www.baidu.com") location.reload() }

10.history对象常见属性和方法

• history对象允许我们访问浏览器曾经的会话历史记录。
• 有两个属性：
• length：会话中的记录条数；
• state：当前保留的状态值；
• 有五个方法：
• back()：返回上一页，等价于history.go(-1)；
• forward()：前进下一页，等价于history.go(1)；
• go()：加载历史中的某一页；
• pushState()：打开一个指定的地址；
• replaceState()：打开一个新的地址，并且使用replace； ```js 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.οnclick= function() {history.back() console.log(history.length,history.state) }
```

11.认识DOM和架构

• 浏览器是用来展示网页的，而网页中最重要的就是里面各种的标签元素，JavaScript很多时候是需要操作这些元素的。
  • JavaScript如何操作元素呢？通过Document Object Model(DOM，文档对象模型)。
  • DOM给我们提供了一系列的模型和对象，让我们可以方便的来操作Web页面。

12.EventTarget

• 因为继承自EventTarget，所以也可以使用EventTarget的方法： ```js document.addEventListener("click", () => { console.log("document被点击") })

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

13.Node节点

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

• Node有几个非常重要的属性： + nodeName：node节点的名称。 + nodeType：可以区分节点的类型。 + nodeValue：node节点的值； + childNodes：所有的子节点； ```js 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对象 document.body.appendChild(strongEl) ```

  14.Document

  • Document节点表示的整个载入的网页，我们来看一下常见的属性和方法： ```js // 常见的属性 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)

// 常见的方法 // 创建元素 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") ```

15.Element

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

```js 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) ```

16.认识事件监听

• JavaScript脚本和浏览器之间交互时，浏览器给我们提供的BOM、DOM等一些对象模型。
  • 事实上还有一种需要和浏览器经常交互的事情就是事件监听：
  • 浏览器在某个时刻可能会发生一些事件，比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列的事件；
• 我们需要以某种方式(代码)来对其进行响应，进行一些事件的处理； p在Web当中，事件在浏览器窗口中被触发，并且通过绑定到某些元素上或者浏览器窗口本身，那么我们就可以 给这些元素或者window窗口来绑定事件的处理程序，来对事件进行监听。 n 如何进行事件监听呢？ p事件监听方式一：在script中直接监听； p事件监听方式二：通过元素的on来监听事件； p事件监听方式三：通过EventTarget中的addEventListener来监听；

17.认识事件流的由来

• 事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？
  • 我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；
  • 这是因为我们的HTML元素是存在父子元素叠加层级的；
  • 比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的；

18.事件冒泡和事件捕获

• 会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡(Event Bubble)。
  • 事实上，还有另外一种监听事件流的方式就是从外层到内层(body -> span)，这种称之为事件捕获(Event Capture)；
  • 为什么会产生两种不同的处理流呢？
    • 这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题，但是他们采用了完全相反的事件流来对事件进行了传递；
      • IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式；
• 那么我们如何去监听事件捕获的过程呢？ js document.body.addEventListener("click", () => { console.log("事件避祸阶段：body被点击") }， true)

19.冒泡和捕获的顺序

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

20.事件对象event

• 当一个事件发生时，就会有和这个事件相关的很多信息：
  • 比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；
  • 那么这些信息会被封装到一个Event对象中；
  • 该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；
• 常见的属性：
  • type：事件的类型；
  • target：当前事件发生的元素；
  • currentTarget：当前处理事件的元素；
  • offsetX、offsetY：点击元素的位置；
• 常见的方法：
  • preventDefault：取消事件的默认行为；
  • stopPropagation：阻止事件的进一步传递；
• 事件类型：https://developer.mozilla.org/zh-CN/docs/Web/Events