JS-DOM

First Post:

Last Update:

高级 DOM 操作

DOM 概述

DOM 是连接 js 和 浏览器 的接口

1
2
graph LR
JS --- DOM --- Browser
  • DOM 允许我们使用 js 与浏览器互动
  • 利用 js 增删改查 HTML 元素和属性, 以及 CSS 样式
  • DOM 树基于 HTML 文件生成
  • DOM 是一个非常复杂的 API

API(Application Programming Interface)

DOM API 的结构

DOM.jpg

事件: 捕获和冒泡

事件传播分三个阶段

  • 捕获
  • 目标
  • 冒泡

bubbling-capture.jpg

事件监听器 .addEventListener() 默认只监听冒泡事件

若要事件监听器捕获1事件, 需额外添加第三个参数 true :
.addEventListener('事件', 回调函数, true)

不同的方式载入 js 文件

js_load.jpg

方法二和方法三仅适用于现代浏览器

方法一

常规加载方法
html 会等待 js 脚本载入并执行完毕, 然后再载入和解析
不建议使用该方法

1
2
3
<head>
  <script src="./script.js"></script>
</head>

方法二

不重要的代码可以使用该方法

在加载 html 时同时, 也会加载 js (通过异步的方式)
但 html 依旧需要等待 js 执行完成后进行解析

该方法, 脚本的执行顺序不会依照代码上的声明顺序执行
而是会依照先加载完的先执行这样的顺序执行

1
2
3
<head>
  <script async src="script.js"></script>
</head>

方法三

推荐使用
重要的代码推荐使用该方法

与上个方法不同的是, js 会在 html 解析完成后执行
且会依照代码声明顺序执行

1
2
3
<head>
  <script defer src="script.js"></script>
</head>
  1. 1.捕获一般很少用 ↩
≡