BOM模型+DOM模型介绍，常用WebAPI介绍
1.BOM模型
1.1BOM简介
浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"，使开发者通过JS操作浏览器。
常见BOM对象：
| Window | 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 |
| Navigator | 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 |
| Location | 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 |
| History | 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效 |
| Screen | 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 |
注：上述BOM对象均作为window对象的属性保存，可通过window对象来使用，也可以直接使用。
1.2Window对象
1.2.1弹出框
1.2.1.1警告框
用来确保信息传递给用户
window.alert("context")；//window前缀可省略
1.2.1.2确认框
单击“确定”（返回true）或“取消”(返回false)继续进行。
window.confirm("context")；
1.2.1.3提示框
单击”确定“（返回输入值）或”取消“（返回NULL）继续进行。
window.prompt(“context","defaultContext");
1.2.2定时事件
JS可以在时间间隔内执行，主要方法：
setTimeout(function,milliseconds),在等待的毫秒数后执行函数
setInterval(function,milliseconds),等同于setTimeout(),但持续重复执行该函数
1.2.2.1延时器:
参数分别为待执行函数、执行前的毫秒数
button
var btn = document.getElementById("btn");
btn.onclick = function () {
// 创建延时器
var timer = setTimeout(function () {
console.log("good");
}, 3000);
// 清除延时器
// clearTimeout(timer);
};
1.2.2.2定时器:
参数分别为待执行函数、执行前的毫秒数
eg.每隔3s输出good
按钮
var btn = document.getElementById("btn");
btn.onclick = function () {
// 创建定时器
var timer = setInterval(function () {
console.log("good");
}, 3000);
// 清除定时器
// clearInterval(timer);
};
1.2.3Location对象
封装浏览器的地址栏信息，直接打印location，可获取地址栏信息
常用属性：
console.log(location); //输出location对象
console.log(location.href); //输出当前地址的全路径地址
console.log(location.origin); //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host); //输出当前地址的主机
console.log(location.port); //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search); //输出当前地址的后边的参数部分
1.2.4History对象
用来操作浏览器向前或向后翻页
1.2.4.1常用属性
console.log(history); //输出history对象
console.log(history.length); //可以获取到当成访问的链接数量
1.2.4.2常用方法
history.back(); //回退到上一个页面，作用同回退按钮
history.forward(); //跳转到下一个页面，作用同前进按钮
history.go(); //跳转到指定页面，需要整数作为参数（-回退；+前进）
1.2.5Screen对象
包含客户端显示屏幕的信息（所有浏览器都支持）
1.2.5.1Screen对象描述
每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。
1.2.5.2Screen对象属性
属性 描述
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)
bufferDepth 设置或返回调色板的比特深度
colorDepth 返回目标设备或缓冲器上的调色板的比特深度
deviceXDPI 返回显示屏幕的每英寸水平点数
deviceYDPI 返回显示屏幕的每英寸垂直点数
fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑
height 返回显示屏幕的高度
logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数
logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数
pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）
updateInterval 设置或返回屏幕的刷新率
width 返回显示器屏幕的宽度
2.DOM模型
2.1DOM简介
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。
Javascript通过该对象模型获得创建动态HTML的作用。HTML DOM为关于获取，更改，添加或删除HTML元素的标准：
2.2DOM文档节点
2.2.1节点概述
节点Node，构成HTML文档最基本单元（html标签->元素节点，元素属性->属性节点，标签中的文本内容->文本节点，注释，整个HTML文档->文档节点）
节点类型与属性和方法有关。
paragraph1 is
|属性节点| | 文本节点 | | 元素节点 |
2.2.2节点属性
| nodeName | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | *文本内容 |
2.2.3文档节点
代表整个HMTL文档，网页中所有节点为其子节点;
document对象是作为window对象的属性存在的，不用获取可以直接使用
通过该对象我们可以在整个文档访问内查找节点对象，可以通过该对象创建各种节点对象
2.2.4元素节点
标签元素节点
浏览器会将页面中所有的标签都转换为一个元素节点，可通过document方法获取元素节点
eg:documen.getElementById(),根据id属性值获取一个元素节点对象
2.2.5属性节点
表示标签中的属性，非元素节点的子节点，为元素节点的一部分，可通过元素节点获取指定的属性节点
2.2.6文本节点
表示HTML标签以外的文本内容，任意非HTML的文本都是文本节点，它包括可以字面解释的纯文本内容（一般作为元素节点子节点存在）
获取方式：先要获取元素节点，在通过元素节点获取文本节点
2.3DOM文档操作
访问HTML中任何元素，总是从访问document对象开始
2.3.1查找HTML元素
| 方法 | 描述 |
| document.getElementById(id) | 通过元素id查找元素 |
| document.getElementByTagName(name) | 通过标签名查找元素 |
| document.getElementsByClassName(name) | 通过类名查找元素 |
| document.querySelector(CSS选择器) | 通过CSS选择器选择一个元素 |
| document.querySelectorAll(CSS选择器) | 通过CSS选择器选择多个元素 |
eg.通过按钮实现：
Document
button
var btn=document.getElementById("btn");
/* console.log()可以在浏览器的控制台输出一条消息或一个变量,用于调试和查看代码执行的过程的结果*/
console.log(btn);
2.3.2HTML值的获取
元素节点.innerText——获取HTML的inner Text
元素节点.inner HTML——获取HTML的inner HTML
元素节点.属性——获取HTML元素属性值
元素节点.getAttribute(attribute)——获取HTML元素属性值
元素节点.style样式——获取HTML元素行内样式值
eg.获取div中html代码
Document
heading1
var btn=document.getElementById("btn");
/* console.log()可以在浏览器的控制台输出一条消息或一个变量,用于调试和查看代码执行的过程的结果*/
console.log(box.innerHTML);
2.3.3HTML值的改变
元素节点.innerText = new text content——改变HTML元素的inner Text
元素节点.inner HTML = new html content——改变HTML元素的inner HTML
元素节点.属性 = new value——改变HTML元素属性值
元素节点.getAttribute(attribute,value)——改变HTML元素属性值
元素节点.style样式 = new style——改变HTML元素行内样式值
eg.改变按钮文本内容
JavaScript
button
var btn = document.getElementById("btn");
btn.innerText = "JavaScript's button";
console.log(btn);
2.3.4HTML元素的修改
document.createElement(element) 创建 HTML 元素节点
document.createAttribute(attribute) 创建 HTML 属性节点
document.createTextNode(text) 创建 HTML 文本节点
元素节点.removeChild(element) 删除 HTML 元素
元素节点.replaceChild(element) 替换 HTML 元素
元素节点.insertBefore(element) 在指定的子节点前面插入新的子节点
元素节点.appendChild(element) 添加 HTML 元素
2.4DOM文档事件
2.4.1事件概述
可触发浏览器中的行为，点击某HTML元素时会启动一段JS
2.4.2窗口事件
| onblur | 当窗口失去焦点时运行脚本 |
| onfocus | 当窗口获得焦点时运行脚本 |
| onload | 当窗口加载之后运行脚本 |
| onresize | 当调整窗口大小时运行脚本 |
| onstorage | 当Web Storage区域更新时(存储空间中的数据发生变化时)运行脚本 |
eg.调整窗口大小时输出”别动！“
window.onresize = function () {
console.log("dont touch it");
};
2.4.3表单事件
在HTML表单中触发的事件
| onblur | 当元素失去焦点时运行脚本 |
| onfocus | 当元素获得焦点时运行脚本 |
| onchange | 当元素改变时运行脚本 |
| oninput | 当元素获得用户输入时运行脚本 |
| oninvalid | 当元素无效时运行脚本 |
| onselect | 当选取元素时运行脚本 |
| onsubmit | 当提交表单时运行脚本 |
2.4.4键盘事件
通过键盘触发
| onkeydown | 当按下按键时运行脚本 |
| onkeyup | 当松开按键时运行脚本 |
| onkeypress | 当按下并松开按键时运行脚本 |
2.4.5鼠标事件
onclick 单击鼠标运行脚本
ondbclick 双击鼠标运行脚本
onmousedown 按下鼠标按钮时运行脚本
onmouseup 松开鼠标运行脚本
onmousemove 鼠标指针移动时运行脚本
onmouseover 指针移到元素之上时运行，不可阻止冒泡
onmouseout 指针移出元素时运行，不可阻止冒泡
onmouseenter 移至元素之上时运行，可阻止冒泡
onmouseleave 移出元素运行，可阻止冒泡
onmousewheel 转动鼠标滚轮时运行脚本
onscroll 滚动元素滚动条运行脚本
2.4.6媒体事件
通过视频，图像，音频触发该事件
onabort 当发生中止事件时运行脚本
oncanplay 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange 当媒介长度改变时运行脚本
onemptied 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended 当媒介已抵达结尾时运行脚本
onerror 当在元素加载期间发生错误时运行脚本
onloadeddata 当加载媒介数据时运行脚本
onloadedmetadata 当媒介元素的持续时间以及其它媒介数据已加载时运行脚本
onloadstart 当浏览器开始加载媒介数据时运行脚本
onpause 当媒介数据暂停时运行脚本
onplay 当媒介数据将要开始播放时运行脚本
onplaying 当媒介数据已开始播放时运行脚本
onprogress 当浏览器正在取媒介数据时运行脚本
onratechange 当媒介数据的播放速率改变时运行脚本
onreadystatechange 当就绪状态（ready-state）改变时运行脚本
onseeked 当媒介元素的定位属性不再为真且定位已结束时运行脚本
onseeking 当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled 当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate 当媒介改变其播放位置时运行脚本
onvolumechange 当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting 当媒介已停止播放但打算继续播放时运行脚本
2.4.7事件冒泡
事件向上传导，后代元素上事件被触发，祖先元素的相同事件也会被触发
2.4.8事件委派
若想要只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，将其绑定给元素的共同的祖先元素，也就是事件的委派。
事件的委派，是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
2.4.9事件绑定
3.WebAPI
3.1WebAPI简介
Web API，即网络应用程序接口，是应用程序编程接口（API）的一种，用于实现网络应用程序之间的通信和数据交换。Web API使用HTTP协议进行通信，允许不同的软件系统和平台之间进行数据共享和功能调用。
3.2Web API分类
3.2.1DOM API
DOM是一种编程接口，允许程序和脚本能够动态地访问和更新文档的内容、结构和样式。它提供了一种将文档视为由节点和对象组成的结构的方式，使得程序能够改变文档的结构和样式。
常见的DOM API包括：document.getElementById(), document.querySelector(), element.innerHTML等。
3.2.2BOM API
BOM提供了独立于任何特定文档的对象，用于访问和控制浏览器窗口和框架。它包含了与浏览器窗口交互的对象，如window、location、navigator、screen等。
常见的BOM API包括：window.alert(), window.location.href, navigator.userAgent等.
3.2.3Fetch API
Fetch API提供了一种获取（或发送）网络资源（如一份文档）的方法。它返回一个Promise，因此可以与async/await一起使用，以编写简洁直观的异步代码。
Fetch API的基本使用：fetch(url).then(response => response.json()).then(data => console.log(data))。
3.2.4XMLHttpRequest API
一种在浏览器中通过HTTP协议与服务器进行异步通信的技术。它允许网页从服务器请求数据，而无需重新加载整个页面。虽然Fetch API现在更受欢迎，但XMLHttpRequest在一些旧版浏览器或特定场景下仍然被使用。
3.2.3Canvas API
Canvas API提供了一种通过JavaScript和HTML在网页上绘制图形的方法。它允许你在元素上绘制形状、文本、图像等。
使用Canvas API，你可以创建复杂的动画、游戏和图形界面。
3.2.4Geolocation API
Geolocation API允许网页获取用户的地理位置信息。它基于浏览器和设备的支持，可以提供经纬度等详细信息。
常见的应用场景包括地图服务、位置共享等。
3.3Web API注意事项
3.3.1兼容性：
不同浏览器对Web API支持程度可能不同，注意兼容问题。
3.3.2安全性：
注意数据安全性和隐私保护，避免泄露敏感信息。
3.3.3性能：
对于需要频繁调用或处理大量数据的Web API，需要注意优化性能，避免对页面加载和用户体验造成负面影响。
