##实验15 WebAPI ###API 概念 Web API:是浏览器提供的一套操作浏览器功能和页面元素的 API（BOM 和 DOM） ###BOM 简介浏览器对象模型 (BOM)指的是由 Web 浏览器暴露的所有对象组成的表示模型 ####BOM 的顶级对象 window window 是浏览器的顶级对象 **对话框** alert()：显示带有一段消息和一个确认按钮的警告框 prompt()：显示可提示用户输入的对话框 confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框 **页面加载事件** 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); ``` ###DOM 简介文档对象模型（DOM）:定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作 ####DOM HTML DOM 能够操作 HTML 的内容 **改变 HTML 输出流** 在 JavaScript 中，使用 document.write() 可用于直接向 HTML 输出流写内容 ``` document.write("新设置的内容

标签也可以生成

"); ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591536674099) **改变 HTML 内容** ```

Hello World!

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591536953229) **改变 HTML 属性** ```

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591537154899) ####DOM CSS 语法： ``` document.getElementById(id).style.property = new style(); ``` ```

实验楼

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591537570614) ####DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591537559813) *DOM 节点的操作* **获取节点** 首先我们要找到节点。主要有以下三种办法： 1.通过 ID 找到 HTML 元素：使用方法 getElementById() 通过元素的 ID 而选取元素 ``` document.getElementById("demo"); // 假定已经有一个 ID 名为 demo 的标签，可以这样来获取它 ``` 2.通过标签名找到 HTML 元素：使用方法 getElementsByTagName() 来选取元素 ``` ``` 3.通过类名来找到 HTML 元素：使用方法 getElementsByClassName() 通过元素的类名来选取元素 ``` document.getElementsByClassName("name"); // 返回包含 class = "name" 的所有元素的一个列表 ``` **DOM 节点直接的关系** 从 DOM 树中也可以看出，节点与节点之间存在着相对的关系，就如同一个家族一样 **DOM 节点的操作** 1.创建节点创建元素节点：createElement() 方法创建属性节点：createAttribute() 方法创建文本节点：createTextNode() 方法 2.插入子节点 appendChild () 方法向节点添加最后一个子节点 insertBefore (新的子节点，指定的子节点) 方法在指定的子节点前面插入新的子节点(如果第二个参数没写或者为 null，则默认插入到后面 ) 3.删除节点：removeChild() 方法 4.替换子节点：replaceChild() 方法 5.设置节点的属性：获取：getAttribute(name) 设置：setAttribute(name, value) 删除：removeAttribute(name) ####DOM 事件 **事件的定义** 在什么时候执行什么事 **事件三要素** 事件：事件源 + 事件类型 + 事件处理程序示例： 1 ：鼠标单击事件 ```

请点击该文本

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591538827531) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591538839469) 2 ：鼠标双击事件 ```

请点击该文本

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591538938487) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591538948335) 3 ：鼠标移除悬停 ```

把鼠标移到上面

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591539053212) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591539064071) ###示例 ``` Title ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200607-1591539341532)

“Web开发基础”实验报告