## BOM 的顶级对象 window 以及常用操作方法 window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。对话框: * alert()：显示带有一段消息和一个确认按钮的警告框。 * prompt()：显示可提示用户输入的对话框。 * confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。 ### 页面加载事件 * onload ```js window.onload = function() { // 当页面加载完成执行 // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行 }; ``` * onunload ``` js window.onunload = function() { // 当用户退出页面时执行 }; ``` ### 浏览器尺寸 ```js var width = window.innerWidth; document.documentElement.clientWidth; document.body.clientWidth; var height = window.innerHeight; document.documentElement.clientHeight; document.body.clientHeight; ``` ### 定时器 * setTimeout() 方法在指定的毫秒数到达之后执行指定的函数，只执行一次。clearTimeout() 方法取消由 setTimeout() 方法设置的 timeout。 ```js // 创建一个定时器，2000毫秒后执行，返回定时器的标示 var timerId = setTimeout(function() { console.log("Hello shiyanlou"); }, 2000); // 取消定时器的执行 clearTimeout(timerId); ``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591523499968) * setInterval() 方法设置定时调用的函数也就是可以按照给定的时间（单位毫秒）周期调用函数，clearInterval() 方法取消由 setInterval() 方法设置的 timeout。 ```js // 创建一个定时器，每隔 2 秒调用一次 var timerId = setInterval(function() { var date = new Date(); console.log(date.toLocaleTimeString()); }, 2000); // 取消定时器的执行 clearInterval(timerId); ``` ## DOM HTML DOM 能够操作 HTML 的内容 ### 改变 HTML 输出流在 JavaScript 中，使用 document.write() 可用于直接向 HTML 输出流写内容。比如： ```js document.write("新设置的内容

标签也可以生成

"); ``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591523624038) ## 改变 HTML 内容使用 innerHTML 属性改变 HTML 内容。比如修改 p 标签中的内容： ```html

Hello World!

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591523935341) ### 改变 HTML 属性 ```js document.getElementById(id).attribute = new value(); ``` ```html

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591523967019) ## DOM CSS ```html

实验楼

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

我是h1标签

我是p标签

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591538445956) #### DOM 节点的操作 1. 创建节点 ```js var par = document.createElement("p"); ``` 2. 插入子节点 * appendChild () 方法向节点添加最后一个子节点。 * insertBefore (插入的新的子节点，指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null，则默认插入到后面。 3. 删除节点：使用 removeChild() 方法。写法为： ```js 父节点.removeChild(子节点); node.parentNode.removeChild(node); // 如果不知道父节点是什么，可以这样写 ``` 4. 替换子节点：使用 replaceChild() 方法。语法为： ```js node.replaceChild(newnode, oldnode); ``` 5. 设置节点的属性 * 获取：getAttribute(name) * 设置：setAttribute(name, value) * 删除：removeAttribute(name) ## DOM 事件 ### 事件三要素事件由：事件源 + 事件类型 + 事件处理程序组成. * 事件源：触发事件的元素。 * 事件类型：事件的触发方式（比如鼠标点击或键盘点击）。 * 事件处理程序：事件触发后要执行的代码（函数形式，匿名函数。鼠标单击事件： ```html

请点击该文本

``` 未点击前： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591539008921) 点击后： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591539021067) 鼠标双击事件： ```html

请点击该文本

``` 未双击前： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591539111163) 双击后： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591539123220) 鼠标移除悬停： ```html

把鼠标移到上面

``` 未悬停之前： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591539366685) 悬停之后: ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591539376301) ## 挑战：导航栏样式切换通过鼠标点击更改导航栏的样式，来看看最终的效果 ```html Title ``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591540286683) ## 总结：在本节中我们主要学习了以下内容： API 概念 BOM 简介 BOM 的顶级对象 window DOM 简介 DOM HTML DOM CSS DOM 节点 DOM 事件通过对 BOM 和 DOM 这两个浏览器提供的 API 的操作，我们可以实现对浏览器功能以及页面元素的一些列操作。如果你有兴趣，可以自行查找学习浏览器的加载机制的相关内容，你会对 DOM 的内涵有更深入的理解。

“Web开发基础”实验报告