阅读 203

DOM和BOM基本功

JavaScript的三大组成部分:ECMAScript,文档对象模型(DOM),浏览器对象模型(BOM)

文档对象模型(DOM)

什么是DOM?

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

常用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) {}

浏览器对象模型(BOM)

什么是BOM?

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

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 列表中的某个具体页面

更多 - 菜鸟教程

文章分类
前端
文章标签