JavaScriptWeb API (DOM和BOM操作)

Web API (基础部分)

• 作用: 使用 JS 去操作 html 和浏览器

• 分类: DOM 和 BOM

  • DOM: 操作 HTML 文档的 API
  • BOM: 操作浏览器的 API

DOM(文档对象模型)

• 是用来呈现以及与任意 HTML 或 XML 文档进行交互的 API

• 作用: 开发网页内容特效和实现用户交互

  • 动态创建 HTML 元素
  • 改变 HTML 元素的样式
  • 读取或修改 HTML 元素的内容
  • 响应用户事件

DOM 树

• 将 HTML 文档转换为树形结构的对象模型, 体现了标签与标签之间的关系

DOM 对象

• 浏览器根据 html 标签生成的 JS 对象

• 所有的标签属性和方法都可以通过 DOM 对象访问

• 修改这个对象可以映射到 HTML 标签的变化

• 核心思想: 把标签当做对象处理

DOM 基本操作

获取元素(通过 css 选择器)

document.querySelector("css选择器");
// 获取匹配的第一个元素, 返回值为DOM(HTMLElement)对象
// 可以直接操作修改document.querySelectorAll("css选择器");
// 获取所有匹配的元素, 返回值为NodeList对象集合
// 得到的是一个伪数组, 可以索引访问但没有数组的方法
// 可以遍历修改

操作元素内容

对象.innerHTML = "新的内容";
// 直接修改元素的内容
// 显示HTML代码, 解析标签对象.innerText = "新的内容";
// 只能修改元素内的文本内容
// 显示纯文本, 不解析标签

操作元素常用属性

• 常用属性: 如 href, title, src, alt 等

const img = document.querySelector("img");
img.src = "图片地址";
// 修改图片地址

操作元素样式属性

• 通过 style 属性操作元素的样式

对象.style.属性名 = "属性值";const div = document.querySelector("div");
div.style.width = "500px";
div.style.height = "500px";
div.style.backgroundColor = "red"; //当属性名为多个单词时, 需使用小驼峰命名法

给元素添加类名

元素.className = "类名";
// 设置类名, 多个类名用空格分隔
// 新值换旧值, 会覆盖之前的类名元素.classList.add("类名");
// 添加类名, 不存在则添加, 存在则忽略元素.classList.remove("类名");
// 删除类名, 不存在则忽略元素.classList.toggle("类名");
// 切换类名, 不存在则添加, 存在则删除元素.classList.contains("类名");
// 判断是否存在某个类名, 返回布尔值

// 排他思想: 只有一个元素可以有某个类名
const old = document.querySelector(".seclected");
if (old) {old.classList.remove("selected");
}

操作表单元素属性

const input = document.querySelector("input");console.log(input.value);
// 获取输入框的值input.value = "新值";
// 设置输入框的值input.type = "text";
// 设置输入框类型input.checked = true;
// 设置单选框或复选框是否选中input.disabled = true;
// 设置输入框是否禁用input.reset();
// 重置表单

操作自定义属性

• 可以给元素添加自定义属性, 方便操作

<div id="myDiv" data-my-attr="自定义属性"></div>

const div = document.querySelector("#myDiv");console.log(div.dataset.myAttr);div.dataset.myAttr = "新值";
// 设置自定义属性的值delete div.dataset.myAttr;
// 删除自定义属性

定时器(间歇函数)

setInterval(function () {}, 时间间隔);
// 重复执行函数, 每隔指定时间间隔执行一次, 时间单位为毫秒
// 如果是有名函数, 直接写函数名, 不加小括号
// 定时器会返回一个定时器对象(id数字), 可以使用 clearInterval() 停止定时器clearInterval(定时器对象);
// 停止定时器

事件监听

• 用户操作, 如鼠标点击, 键盘按下等称为事件

• 监听事件发生, 执行相应的函数

• 事件监听三要素

  • 事件类型: 如 click, mouseover, keydown 等
  • 事件源: 触发事件的元素
  • 事件处理函数: 响应事件的函数

• 常用事件类型:

  • click: 鼠标点击
  • mouseenter: 鼠标进入
  • mouseleave: 鼠标离开
  • mouseover: 鼠标移入(会冒泡)
  • mouseout: 鼠标移出(会冒泡)
  • focus: 表单获得焦点
  • blur: 表单失去焦点
  • change: 表单元素值改变
  • input: 输入框值改变
  • keydown: 键盘按下
  • keyup: 键盘松开
  • load: 页面加载完成
  • scroll: 滚动条滚动
  • resize: 窗口大小改变
  • submit: from表单提交

对象.addEventListener("事件类型", 函数);
// 给对象添加事件监听, 当事件类型发生时, 执行函数// eg:const btn = document.querySelector("button");
btn.addEventListener("submit", function () {console.log("按钮被点击了");
});

事件对象

• 是个对象, 包含事件触发时的所有信息

• 如何获取事件对象:

  作为函数参数传入: 函数(event) {}

  
  元素.addEventListener("事件类型", function (event) {});
  // event 就是事件对象

• 常用属性:

  • type: 获取当前的事件类型

  • clientX/Y: 获取鼠标在页面(根据可视窗口左上角)的坐标

  • offsetX/Y: 获取鼠标相对于事件源(根据当前 dom 元素左上角)的坐标

  • key: 获取按下的键盘的键值

trim 方法

• 去除字符串前后空格

const str = "  hello world  ";
const newStr = str.trim();
console.log(newStr); // "hello world"

环境对象

• 定义: 指的是函数内部特殊的变量 this, 它代表着当前函数运行时所处的环境, 在普通函数中, this 指向全局对象 window

• 函数的调用方式不同, this 的指向(对象)也不同, 一般来说, 谁调用的函数, this 就指向谁

const btn = document.querySelector("button");
btn.addEventListener("submit", function () {console.log(this); // 输出: <button>...</button>this.style.backgroundColor = "red"; // 改变按钮的背景色
});

webAPI (DOM 进阶操作)

事件流

• 定义: 指的是事件完整执行过程中的流动路径

  • 捕获阶段: 事件从最外层的窗口对象开始，逐层向内传播到目标元素，并触发相应的事件处理程序。

  • 冒泡阶段: 事件从目标元素开始，逐层向外传播到最外层的窗口对象，并触发相应的事件处理程序。

事件捕获

document.addEventListener('click', function(event) {console.log('文档');
}, true)                // 第三个参数为true表示使用事件捕获, false表示使用事件冒泡, 默认为falsefather.addEventListener('click', function(event) {
console.log('父亲');
}, true)son.addEventListener('click', function(event) {
console.log('儿子');
}, true)- 点击 son 元素，输出顺序为：文档、父亲、儿子。
- 点击 father 元素，输出顺序为：文档、父亲。
- 点击 document 元素，输出顺序为：文档。

事件冒泡

document.addEventListener('click', function(event) {console.log('文档');
})father.addEventListener('click', function(event) {
console.log('父亲');
})son.addEventListener('click', function(event) {
console.log('儿子');
})- 点击 son 元素，输出顺序为：儿子、父亲、文档。
- 点击 father 元素，输出顺序为：父亲、文档。
- 点击 document 元素，输出顺序为：文档。

• 阻止冒泡: event.stopPropagation()

事件解绑

DOM.romoveEventListener("click", 函数名);

阻止元素默认行为

const form = duocument.querySelector("form");
form.addEventListener("submit", function (event) {event.preventDefault(); // 阻止默认提交行为
});

事件委托

• 定义: 将事件监听器添加到父元素上，当子元素触发事件时，元素通过事件冒泡机制将事件传递给父元素的事件监听器，从而实现事件的委托。

• 优点: 减少内存占用，提高性能。

• 原理: 利用事件冒泡，父元素的事件监听器可以监听到子元素的事件，从而实现事件的委托。

// 父元素
const ul = document.querySelector("ul");
ul.addEventListener("click", function (event) {// 子元素if (event.target.tagName === "LI") {// 判断点击的是不是子元素event.target.style.color = "blue"; //使用target属性获取触发事件的元素const id = event.target.dataset.id; // 使用dataset属性获取自定义属性值}
});

更多事件类型

页面加载事件: load / domcontentloaded

• load: 页面加载完成时触发。

  它不仅可以监听页面的加载完成，还可以监听页面的资源加载情况，比如图片、样式表、脚本等。

// 等待页面所有资源加载完毕, 就执行回调函数
window.addEventListener("load", function () {});

• domcontentloaded: 页面 DOM 结构加载完成时触发。

  它与 load 事件不同，它只会在 DOM 结构加载完成时触发，不会等待资源的加载。

// 等待DOM结构加载完成, 就执行回调函数
document.addEventListener("DOMContentLoaded", function () {});

元素滚动事件

• 可以个页面添加, 也可以给元素添加。

window.addEventListener("scroll", function (event) {consol.log("页面滚动了");
});

• 获取位置

1. scrollTop: 获取或设置当前页面的垂直滚动条的位置。(被卷去的部分)

2. scrollLeft: 获取或设置当前页面的水平滚动条的位置。

• 它们的值可读写, 类型为数字型

/*页面平滑滚动*/
html {scroll-behavior: smooth;
}

const div = document.querySelector("div");
window.addEventListener("scroll", function (event) {const n = document.documentElement.scrollTop;if (n > 100) {div.style.display = "block";}
});

页面尺寸事件

window.addEventListener("resize", function (event) {console.log("页面尺寸变化了");
});

• 获取尺寸

const div = document.querySelector("div");
console.log(div.clientWidth); // 盒子宽度
console.log(div.clientHeight); // 盒子高度

元素尺寸与位置

1. offsetwidth: 元素的宽度，包括内容宽度和内边距。(包括边框和间距)

2. offsetheight: 元素的高度，包括内容高度和内边距。

3. offsetTop: 元素相对于其定位父元素的上边缘的距离。(只读属性)

4. offsetLeft: 元素相对于其定位父元素的左边缘的距离。

   • 若 3 和 4 的父元素无定位, 则找定位祖先元素, 直至 body 元素为止。

5. element.getBoundingClientRect().top/left: 获取元素的边界框信息(相对于视口), 返回一个对象。

6. event.pageX/Y: 鼠标相对于页面的坐标。

日期对象

实例化

const date = new Date(); // 当前日期和时间const date1 = new Date(year, month, day, hours, minutes, seconds, milliseconds); // 指定日期和时间

方法

1. getFullYear(): 获取完整的年份。

2. getMonth(): 获取月份(0-11)。

3. getDate(): 获取日期(1-31)。

4. getDay(): 获取星期几(0-6)。

5. getHours(): 获取小时(0-23)。

6. getMinutes(): 获取分钟(0-59)。

7. getSeconds(): 获取秒(0-59)。

8. getMilliseconds(): 获取毫秒(0-999)。

9. getTime(): 获取从 1970 年 1 月 1 日午夜到当前时间的毫秒数。

10. getTimezoneOffset(): 获取时区偏移量。

11. setFullYear(year): 设置完整的年份。

12. setMonth(month): 设置月份(0-11)。

13. setDate(day): 设置日期(1-31)。

14. setHours(hours): 设置小时(0-23)。

15. setMinutes(minutes): 设置分钟(0-59)。

16. setSeconds(seconds): 设置秒(0-59)。

17. setMilliseconds(milliseconds): 设置毫秒(0-999)。

18. setTime(milliseconds): 设置从 1970 年 1 月 1 日午夜到指定时间的毫秒数。

19. toUTCString(): 将日期对象转换为 UTC 格式的字符串。

20. toDateString(): 将日期对象转换为日期格式的字符串。

21. toTimeString(): 将日期对象转换为时间格式的字符串。

22. toLocaleString(): 将日期对象转换为本地格式的字符串。

时间戳

• 定义: 时间戳是指格林威治时间 1970 年 01 月 01 日 00 时 00 分 00 秒(北京时间 1970 年 01 月 01 日 08 时 00 分 00 秒)起至现在的总秒数。

• 使用场景: 如果计算倒计时效果, 前面方法无法直接计算, 需要借助于时间戳完成。

• 算法:

1. 获取当前时间戳:

   • const timestamp = Date.now();

   • const timestamp = +new Date();

   • const timestamp = (new Date()).getTime();

2. 计算倒计时:

   • const d = parseInt(总秒数 / 60 / 60 / 24); 计算天数

   • const h = parseInt((总秒数 / 60 / 60) % 24); 计算小时数

   • const m = parseInt((总秒数 / 60) % 60); 计算分钟数

   • const s = parseInt(总秒数 % 60); 计算秒数

节点操作

• DOM节点: 指的是文档对象模型(Document Object Model)中的节点, 包括元素节点、属性节点、文本节点、注释节点等。

查找节点(根据元素之间的关系)

• 父节点查找: 子元素.parentNode, 返回值为object, 找不到返回null

• 子节点查找: 父元素.children , 返回值为array(仅包含子元素节点), 找不到返回空数组

• 兄弟节点查找: 元素.previousElementSibling(前一个兄弟节点) 或 元素.nextElementSibling(后一个兄弟节点), 返回值类型为object, 找不到返回null

创建节点(新增元素节点)

• 创建节点: document.createElement(标签名) , 返回值类型为object, 即新创建的元素节点

• 插入节点(方法一): 父元素.appendChild(新元素名) , 插入到最后

• 插入节点(方法二): 父元素.insertBefore(新元素名, 参照元素) , 插入到参照元素之前

• 克隆节点: 元素.cloneNode(true/false) , true表示深复制, false表示浅复制, 返回值类型为object, 即新创建的元素节点

删除节点

• 删除节点: 父元素.romoveChild(子元素) , 删除该元素节点

M端事件

• tauchstart: 手指触摸屏幕时触发

• touchmove: 手指在屏幕上滑动时触发

• touchend: 手指从屏幕上松开时触发

JS插件(swiper)

1. 官网: https://swiper.com.cn/

2. 下载: https://swiper.com.cn/download

3. 引入: 下载压缩包, 解压, 找到 package文件夹, 引入 js文件和 css文件即可。

webAPI (BOM 操作)

JS 执行机制

• javascript 是单线程的, 也就是说, 只能同时执行一个任务。

• 为了解决这个问题, 利用多核 CPU 的计算能力, HTML5 提出 Web Worker API, 允许 JavaScript 脚本创建多个线程, 并将任务分配给这些线程。

• 于是, JS 出现了同步和异步的概念。同步任务是指在执行过程中, 必须等待前一个任务执行完毕, 才能继续执行; 异步任务是指在执行过程中, 不必等待前一个任务, 而是可以同时执行多个任务。

• 同步任务: 都在主线程上执行, 形成一个执行栈。

• 异步任务: 都在主线程之外, 形成一个事件队列。

• 事件循环: 主线程不断从事件队列中取出事件, 执行事件。(优先级: 同步任务 > 异步任务)

window 对象

• 定义: window 对象是 JavaScript 中最顶层的对象, 它代表了浏览器窗口, 也是所有全局变量和函数的宿主。

• BOM 对象: 浏览器对象模型(Browser Object Model)

定时器 - 延时函数

• settimeout()方法: 设定一个定时器, 在指定的时间间隔后执行一次函数。

  
  setTimeout(function(){}，delay);- 参数: function() - 要执行的函数名或函数体。
  - 参数: delay - 延迟时间，单位为毫秒。// 清除延时函数
  clearTimeout(timeoutID);- 参数: timeoutID - 要清除的延时函数的ID。

location 对象

• 定义: location 对象代表当前页面的 URL 信息。

// 获取当前页面的URL
var url = location.href;// 获取当前页面的域名
var domain = location.hostname;// 获取当前页面的协议
var protocol = location.protocol;// 获取URL中的查询字符串
location.search;// 获取URL中的hash值
location.hash;// 重定向到新的页面
location.href = "http://www.example.com";// (强制)刷新当前页面
location.reload(true);

navigator 对象

• 定义: navigator 对象代表浏览器的信息。

• 通过 userAgent 属性可以获取浏览器的类型和版本信息。

// 获取浏览器类型
var browser = navigator.appName;// 获取浏览器版本
var version = navigator.appVersion;// 获取操作系统类型
var os = navigator.platform;// 获取用户代理信息
var userAgent = navigator.userAgent;// 判断是否为移动设备// 检测 userAgent（浏览器信息）
!(function () {const userAgent = navigator.userAgent;// 验证是否为Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);// 如果是Android或iPhone，则跳转至移动站点if (android || iphone) {location.href = "http://m.itcast.cn";}
})();

history 对象

• 定义: history 对象代表浏览器的历史记录。

• 属性和方法

back(); // 后退
forward(); // 前进
go(num); // 前进或后退到指定页面back.addEventListener("click", function () {history.back();// 或者// history.go(-1);
});forward.addEventListener("click", function () {history.forward();// 或者// history.go(1);
});

本地存储(localStorage)

• 定义: 本地存储是指在浏览器端存储数据, 使得数据在浏览器关闭后依然存在。

• 常用方法

// 存储数据
localStorage.setItem("key", "value"); //本地存储只能存储字符串// 获取数据
var value = localStorage.getItem("key");// 删除数据
localStorage.removeItem("key");

• sessionStorag: 与 localStorage 类似, 但数据在浏览器关闭后就丢失。

• cookie: 存储在用户本地的小型文本文件, 用于存储少量数据, 并在每次请求时发送给服务器。

• IndexedDB: 是一个高性能的本地数据库, 它使得客户端存储大量结构化数据变得十分简单。

存储复杂数据类型

• JSON.stringify()方法: 将对象转换为 JSON 字符串。

• JSON.parse()方法: 将 JSON 字符串转换为对象。

// 存储对象
let obj = { name: "John", age: 30, city: "New York" };
let jsonStr = JSON.stringify(obj);
localStorage.setItem("user", jsonStr);// 获取对象
let jsonStr = localStorage.getItem("user");
let obj = JSON.parse(jsonStr);

正则表达式

• 定义: 正则表达式(regular expression)是一种文本模式, 它能帮助你方便的检查、匹配、替换文本。

• 语法:

let str = "this is a test string, pattern, flags";// 定义规则
const pattern = /pattern/;// 匹配规则
pattern.test(str); // true
pattern.exec(str); // ["pattern", index: 10, input: "this is a test string, pattern, flags"]

元字符

• 定义: 元字符(metacharacter)是指用来匹配、搜索、替换文本的特殊字符。

• 常用元字符

[a - zA - Z]; // 匹配所有小写字母和大写字母

• 分类

  • 字符类: [abc] 匹配 a 或 b 或 c
  • 字符类范围: [a-z] 匹配所有小写字母(有一个就为 true)
  • 字符类否定: [^abc] 匹配除了 a、b、c 以外的字符
  • 字符类组合: [a-zA-Z0-9] 匹配所有字母和数字
  • 字符类转义: \d 匹配数字, \D 匹配非数字
  • 字符类预定义: \w 匹配字母、数字、下划线, \W 匹配非字母、数字、下划线
  • 字符类转义: \s 匹配空白字符(包括空格、制表符、换行符), \S 匹配非空白字符
  • 字符类边界: \b 匹配单词边界
  • 字符类回溯: \B 匹配非单词边界
  • 字符类数量词: {n} 匹配 n 次, {n,} 匹配 n 或更多次, {n,m} 匹配 n 到 m 次
  • 字符类贪婪与懒惰: * 匹配 0 或多个字符, + 匹配 1 或多个字符,? 匹配 0 或 1 个字符
  • 字符类锚点(边界符): ^ 匹配字符串开始(匹配以正则开头的字符), $ 匹配字符串结束(匹配以正则结尾的字符)
  • 字符类子表达式: ( ) 匹配子表达式的内容
  • 字符类反向引用: \1 引用第 1 个子表达式的内容
  • 字符类. : 匹配除换行符以外的任意字符

/^哈+$/.test("哈哈哈哈哈哈"); // true
/^哈+$/.test("哈哈"); // true
/^哈+$/.test("二哈"); // false

修饰符

• 定义: 修饰符(modifier)是指在正则表达式中用于控制匹配方式的符号。

• 常用修饰符

// 全局匹配
/pattern/g;// 忽略大小写
/pattern/i;

替换

let str = "this is a test string, pattern, Pattern, flags";let newStr = str.replace(/pattern/gi, "replacement"); // "this is a test string, replacement, replacement, flags"