AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

BOM-DOM

2022-10-20 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS查漏补缺系列是我在学习JS高级语法时做的笔记，通过实践费曼学习法进一步加深自己对其的理解，也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解JavaScript中的BOM-DOM

BOM

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

通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
BOM主要包括的对象模型：

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

Window全局对象

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

image.png
对于这么多的内容，去背肯定是不现实的，而且有些内容还会改变，所以建议记几个常用的，剩下的用到再去MDN查找：
查看MDN文档时，我们会发现有很多不同的符号：
image.png
coderwhy老师对它们的解释是：
删除符号：表示这个API已经废弃，不推荐继续使用了；
点踩符号：表示这个API不属于W3C规范，某些浏览器有实现（所以兼容性的问题）；
实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题；

Window常见属性-方法-事件

  1. 常见的属性
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)

image.png

  1. 常见的方法
const scrollBtn = document.querySelector("#scroll")
scrollBtn.onclick = function() {
  // 1.scrollTo
  window.scrollTo({ top: 2000 })

  // 2.close
  window.close()

  // 3.open
  window.open("http://www.baidu.com", "_self") // _self不另开页面
}
  1. 常见事件
window.onload = function() {
  console.log("window窗口加载完毕~")
}

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

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

// 一般vue的路由会有
const hashChangeBtn = document.querySelector("#hashchange")
hashChangeBtn.onclick = function() {
  location.hash = "aaaa"
}
window.onhashchange = function() {
  console.log("hash发生了改变")
}

前面我们提到window继承自EventTarget，其中包含的事件也是会经常用到的：

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

// 由浏览器派发click事件，所以上面的函数才会被调用
window.addEventListener("click", clickHandler)
window.removeEventListener("click", clickHandler)

// 监听coderwhy事件，有这个事件就会进行处理
window.addEventListener("coderwhy", () => {
  console.log("监听到了coderwhy事件")
})

// 派发coderwhy事件（浏览器没有的事件）
window.dispatchEvent(new Event("coderwhy"))

location对象

主要是对URL进行操作

location常见属性-方法

  1. 常见属性
  • Location.href：包含整个 URL
  • Location.protocol：包含 URL 对应协议，最后有一个":"。
  • Location.host：包含了域名，可能在该串最后带有一个":"并跟上 URL 的端口号。
  • Location.hostname：包含 URL 域名。
  • Location.port：包含端口号。
  • Location.pathname：包含 URL 中路径部分，开头有一个 /。
  • Location.hash：URL的哈希值，开头有一个 #。

image.png

  1. 常见方法
  • Location.assign()：加载给定 URL 的内容资源到这个 Location 对象所关联的对象上。（跳转+可以回退）

  • Location.reload()：重新加载来自当前 URL 的资源。

    • 该参数为 true 时会导致该方法引发的刷新一定会从服务器上加载数据。
    • 如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。
  • Location.replace()：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）

history常见的属性-方法

  1. 常见属性
  • length：会话中的记录条数；
  • state：当前保留的状态值；
  1. 常见方法
  • back()：返回上一页，等价于history.go(-1)；
  • forward()：前进下一页，等价于history.go(1)；
  • go()：加载历史中的某一页；
  • pushState()：打开一个指定的地址； （跳转(不刷新网页)）
  • replaceState()：打开一个新的地址，并且使用replace

DOM

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

通过Document Object Model（DOM，文档对象模型）。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

DOM给我们提供了一系列的模型和对象，让我们可以方便的来操作Web页面，架构图如下：
image.png
把尽可能都有的属性放在父类（EventTarget和Node），有根据属性的不同来划分成其他类型，这样我们就能根据不同的需求来获取不同的内容，再针对不同的内容进行不同的操作

EventTarget

跟上面讲过的用法是一样的 
const divEl = document.querySelector("#box")
const spanEl = document.querySelector(".content")

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

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

Node

Node是对应节点的名称
  1. 常见属性
  • Node.nodeName: 返回当前节点的节点名称

  • Node.nodeType: 只读属性,表示的是该节点的类型。

    • nodeType 属性可用来区分不同类型的节点，比如 元素, 文本 和 注释。

  • Node.nodeValue: 属性返回或设置当前节点的值。

    • 对于文档节点来说，nodeValue返回null. 对于 text, comment，和 CDATA 节点来说，nodeValue 返回该节点的文本内容. 对于 attribute 节点来说，返回该属性的属性值。
  • childNodes：所有的子节点；

image.png

  1. 常见方法：
  • Node.cloneNode：克隆一个 Node，并且可以选择是否克隆这个节点下的所有内容。默认情况下，节点下的内容会被克隆。
  • textContent: 文本内容
  • appendChild: 添加子节点
// 常见的方法
const strongEl = document.createElement("strong")
strongEl.textContent = "我是strong元素"
const cloneStrongEl = strongEl.cloneNode(true) //true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身。
divEl.appendChild(strongEl)

Document

  1. 常见属性

image.png

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

// 删除元素
document.body.removeChild(imageEl)

Element

我们平时创建的div、p、span等元素在DOM中表示为Element元素
  1. 常见属性
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) // 元素内部的宽度,该属性包括内边距（padding）
console.log(divEl.clientHeight)// 元素内部的高度（以像素为单位），包含内边距
console.log(divEl.offsetLeft)
console.log(divEl.offsetTop)
  1. 常见方法
  • Element.getAttribute()：返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）
  • Element.setAttribute()： 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
// 常见的方法
const value = divEl.getAttribute("age")
console.log(value)
divEl.setAttribute("height", 1.88)

事件监听

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

方法1：在script中直接监听；
方法2：通过元素的on来监听事件；
方法3：通过EventTarget中的addEventListener来监听；（更常用）

<div class="box" onclick="console.log('div元素被点击')"></div> -->
<div class="box" onclick="divClick()"></div>
function divClick() {
  console.log("div元素被点击2")
}
divEl.addEventListener("click", () => {
  console.log("div元素被点击3")
})

事件流

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

image.png

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元素被点击了")
  event.stopPropagation()
}, true) // 在后面添加个true就变成事件捕获了

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

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

image.png
捕获阶段由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收
冒泡阶段开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点

小结：

  • JS 代码中只能执行捕获或者冒泡其中的一个阶段
  • onclick 和 attachEvent只能得到冒泡阶段
  • addEventListener(type,listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false (不写默认就是false),表示在事件冒泡阶段调用事件处理程序
  • 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
  • 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

事件对象

当一个事件发生时，就会有和这个事件相关的很多信息： 比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；
那么这些信息会被封装到一个Event对象中； 该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；
  1. 常见属性：
  • type：事件的类型；
  • target：当前事件发生的元素；
  • currentTarget：当前处理事件的元素；
  • offsetX、offsetY：点击元素的位置；
const spanEl = document.querySelector(".span")

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

image.png

  1. 常见方法：
  • preventDefault：取消事件的默认行为；
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
  event.preventDefault() // 阻止链接跳转
})
  • stopPropagation：阻止事件的进一步传递；（可以用到事件冒泡和事件捕获）
文章标签：
JavaScript
Go
前端开发
编解码
API
缓存
_Eureka_
目录
相关文章
终究是雾散
|
XML JavaScript API
BOM 和 DOM 的关系
BOM 和 DOM 的关系
终究是雾散
72 0
赵广陆
|
XML 编解码 JavaScript
JS中的BOM和DOM的介绍与使用
JS中的BOM和DOM的介绍与使用
赵广陆
98 0
光明顶阳顶天
|
5天前
|
JavaScript 安全 物联网
DOM 和 BOM 在项目中的应用
【10月更文挑战第19天】在现代网页开发和应用项目中，DOM（文档对象模型）和 BOM（浏览器对象模型）扮演着至关重要的角色。它们为开发者提供了与网页文档和浏览器环境进行交互的能力，使项目能够实现丰富的功能和用户体验。
光明顶阳顶天
15 5
杀死一只知更鸟debug
|
2月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结（基础篇）
文章总结了JavaScript的BOM和DOM知识点，包括window、screen、location、history、navigator对象，以及消息框、计时器和cookie。同时，介绍了DOM的概念、节点获取和修改方法，以及事件处理。
杀死一只知更鸟debug
34 0
js中BOM和DOM总结（基础篇）
天玄TX
|
6月前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
天玄TX
181 4
zrblue
|
6月前
|
XML JavaScript 前端开发
JavaScript 之 DOM and BOM 总结
JavaScript 之 DOM and BOM 总结
zrblue
66 0
&amp;ACE&amp;
|
6月前
|
XML JavaScript 前端开发
js中dom和bom有什么区别
js中dom和bom有什么区别
&amp;ACE&amp;
101 0
游客burgmwkv
|
JavaScript 前端开发
函数 DOM BOM
函数 DOM BOM
游客burgmwkv
29 0
函数 DOM BOM
__爱吃香菜
|
XML JavaScript 前端开发
BOM与DOM详解
BOM与DOM详解
__爱吃香菜
79 0
程序员牛哥
|
XML JavaScript API
DOM，BOM，window的区别
DOM，BOM，window的区别
程序员牛哥
80 0