Web API Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM） >浏览器对象模型（Browser Object Model (BOM)）指的是由 Web 浏览器暴露的所有对象组成的表示模型。BOM 与 DOM（Document Object Model，文档对象模型）不同，其既没有标准的实现，也没有严格的定义，所以浏览器厂商可以自由地实现 BOM。 >作为显示文档的窗口，浏览器程序将其视为对象的分层集合。当浏览器分析文档时，它将创建一个对象的集合，以定义文档，并详细说明它应如何显示。浏览器创建的对象称为文档对象，它是浏览器使用的更大的对象集合的一部分。此浏览器对象集合统称为浏览器对象模型或 BOM。 >BOM 层次结构的顶层是窗口对象，它包含有关显示文档的窗口的信息。某些窗口对象本身就是描述文档和相关信息的对象。 1.页面加载事件 onload ``` window.onload = function() { // 当页面加载完成执行 // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行 }; ``` onunload ``` window.onunload = function() { // 当用户退出页面时执行 }; ``` 浏览器尺寸 ``` var width = window.innerWidth; document.documentElement.clientWidth; document.body.clientWidth; var height = window.innerHeight; document.documentElement.clientHeight; document.body.clientHeight; ``` 定时器 setTimeout() 方法在指定的毫秒数到达之后执行指定的函数，只执行一次。clearTimeout() 方法取消由 setTimeout() 方法设置的 timeout。 ``` // 创建一个定时器，2000毫秒后执行，返回定时器的标示 var timerId = setTimeout(function() { console.log("Hello shiyanlou"); }, 2000); // 取消定时器的执行 clearTimeout(timerId); ``` setInterval() 方法设置定时调用的函数也就是可以按照给定的时间（单位毫秒）周期调用函数，clearInterval() 方法取消由 setInterval() 方法设置的 timeout ``` // 创建一个定时器，每隔 2 秒调用一次 var timerId = setInterval(function() { var date = new Date(); console.log(date.toLocaleTimeString()); }, 2000); // 取消定时器的执行 clearInterval(timerId); ``` 2.改变 HTML 输出流在 JavaScript 中，使用 document.write() 可用于直接向 HTML 输出流写内容。比如： ``` document.write("新设置的内容

标签也可以生成

"); ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591350669152) 改变 HTML 内容使用 innerHTML 属性改变 HTML 内容。比如修改 p 标签中的内容： ```

Hello World!

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351040076) 改变 HTML 属性语法： ``` document.getElementById(id).attribute = new value(); ``` ```

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351183173) DOM 能够改变 HTML 元素的样式。语法为： ``` document.getElementById(id).style.property = new style(); ``` ```

实验楼

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351348928) 3.获取节点要操作节点，首先我们要找到节点。主要有以下三种办法：通过 ID 找到 HTML 元素：使用方法 getElementById() 通过元素的 ID 而选取元素，比如： ``` document.getElementById("demo"); // 假定已经有一个 ID 名为 demo 的标签，可以这样来获取它 ``` 通过标签名找到 HTML 元素：使用方法 getElementsByTagName() 来选取元素，如果有多个同类型标签，那么我们可以通过下标来确认，比如： ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351463722) 通过类名来找到 HTML 元素：使用方法 getElementsByClassName() 通过元素的类名来选取元素。比如 ``` document.getElementsByClassName("name"); // 返回包含 class = "name" 的所有元素的一个列表。 ``` ``` DOM 节点演示

我是h1标签

我是p标签

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351540777) DOM 节点的操作创建节点创建元素节点：使用 createElement() 方法。比如： ``` var par = document.createElement("p"); ``` 创建属性节点：使用 createAttribute() 方法。创建文本节点：使用 createTextNode() 方法。插入子节点 appendChild () 方法向节点添加最后一个子节点。 insertBefore (插入的新的子节点，指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null，则默认插入到后面。删除节点：使用 removeChild() 方法。写法为： ``` 父节点.removeChild(子节点); node.parentNode.removeChild(node); // 如果不知道父节点是什么，可以这样写 ``` 替换子节点：使用 replaceChild() 方法。语法为： ``` node.replaceChild(newnode, oldnode); ``` 设置节点的属性：获取：getAttribute(name) 设置：setAttribute(name, value) 删除：removeAttribute(name) 4.例子 1 ：鼠标单击事件 ```

请点击该文本

``` 例子 2 ：鼠标双击事件： ```

请点击该文本

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351851764) 例子 3 ：鼠标移除悬停： ```

把鼠标移到上面

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351967033) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591351926484) 5.通过鼠标点击更改导航栏的样式，来看看最终的效果： ``` Title ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200605-1591352125764)

“Web开发基础”实验报告