DOM和BOM基本功

·  阅读 1139

JavaScript是一门脚本语言,需要依赖运行环境。
其中非常重要的运行环境就是浏览器,而且浏览器本身又作为一个应用程序需要对其本身进行操作,所以通常浏览器会有对应的对象模型(BOM)。
我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁/接口。
DOM为JavaScript脚本与html文档的桥梁/接口。

什么是BOM?

BOM(Browser Object Model)即浏览器对象模型,用于与浏览器窗口进行交互 核心对象为window,可用console.dir(window)查看window的属性和方法,BOM包含了DOM

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

  • window:包括全局属性、方法,控制浏览器窗口相关的属性、方法;

  • location:浏览器连接到的对象的位置(URL);

  • history:操作浏览器的历史;

  • document:当前窗口操作文档的对象;

window对象在浏览器中有两个身份
身份一:全局对象。我们知道ECMAScript其实是有一个全局对象的,这个全局对象在Node中是global;比如默认给我们提供了全局的函数和类:setTimeout、Math、Date、Object等;比如在全局通过var声明的变量,会被添加到GO中,也就是会被添加到window上;
身份二:浏览器窗口对象。作为浏览器窗口时,提供了对浏览器操作的相关的API

DOM和BOM的区别

image-20210801113943624的副本.png

window对象

页面加载事件
loadDOM全部加载完成
DOMContentLoaded仅当DOM加载完成,不包括样式表,图片,flash等,ie9以上支持
调整窗口
resize窗口大小发生改变时(js实现响应式页面)
定时器
setTimeout() 和 clearTimeOut()倒计时结束后,调用一次回调函数。
setInterval() 和 clearInterval()每隔一段时间,调用一次回调函数。

location对象

location是最有用的BOM对象之一,提供了当前窗口中加载文档的信息,以及通常得导航功能

属性
location.href返回完整的URL
location.host返回域名
location.search返回一个URL的查询部分
方法
location.assign()载入一个新的文档
location.reload()重新载入当前文档
location.replace()用新的文档替换当前文档

history对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。 History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问

属性
history.length返回历史列表中的网址数
方法
history.forward()加载 history 列表中的前一个 URL
history.back()加载 history 列表中的下一个 URL
history.go()加载 history 列表中的某个具体页面

什么是DOM?

文档对象模型(Document Object Model, 简称DOM),是W3C组织规定的处理HTML的标准编程接口。 通过DOM API,用于操作html页面。

DOM 构架

image.png

常用DOM方法

主要包括:增、删、改、查、事件操作

增、删、改、查(思维导图)

image-20210730175217401.png

事件操作

  1. 事件三要素

    • 绑定元素
    • 触发事件
    • 响应函数

document.addEventListener(event, function[, useCapture])

参数描述
event(必选)字符串,描述事件名称
function(必选)函数,触发事件后执行的函数
useCapture(可选)布尔值,true捕获阶段执行,false冒泡阶段执行
  1. 常用事件总结
常见事件(鼠标)触发条件
click单击
dblclick双击
mouseenter鼠标悬停在元素上,替代mouseover
mouseleave鼠标离开元素,替代mouseout
focus鼠标按键按下
blur鼠标按键抬起
常见事件(键盘)触发条件
keydown键盘按键按下
keypress键盘按键按下,仅用于字符按键,不识别功能键
keyup键盘按键抬起

执行顺序:keydown → keypress → keyup

  1. DOM事件流

DOM事件流:DOM事件发生的顺序,可以分为事件捕获阶段和事件冒泡阶段。 image-20210731202702131的副本.png

TIPS

  1. onclick和attchEvent只有冒泡
  2. document.addEventListener(event, function[, useCapture]) true为事件捕获,false/省略为事件冒泡
  3. 部分事件类型无冒泡(blur...)

事件委托(代理、委派):不给每个子元素单独设置事件监听,而是设置在其父元素上,利用冒泡原理间接设置到每个子节点,提升程序性能。

例子: 将多个子元素(li)的事件监听委托给父元素(ul),父元素利用event.target获取子元素,并通过子元素调用(call)

  1. 事件对象

在触发 DOM 上事件时,会产生一个事件对象 event,这个对象中包含着所有与该事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

ele.onclick = funciton(event) {}

更多 - 菜鸟教程

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改