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

Hello World!

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527027584) 改变 HTML 属性。语法为： document.getElementById(id).attribute = new value(); ```

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527074145) DOM CSS DOM 能够改变 HTML 元素的样式。语法为： document.getElementById(id).style.property = new style(); ```

实验楼

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527160991) DOM节点 HTML 文档中的所有内容都是节点：整个文档就是一个文档节点，而每一个 HMTL 标签都是一个元素节点。HTML 标签中的文本则是文本节点，HTML 标签的属性是属性节点，一切都是节点。 DOM 节点的操作获取节点 1、通过 ID 找到 HTML 元素：使用方法 getElementById() 通过元素的 ID 而选取元素。 2、通过标签名找到 HTML 元素：使用方法 getElementsByTagName() 来选取元素，如果有多个同类型标签，那么我们可以通过下标来确认。 ``` ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527254430) 3、通过类名来找到 HTML 元素：使用方法 getElementsByClassName() 通过元素的类名来选取元素。 DOM 节点直接的关系父节点、兄弟节点、子节点、所有子节点 ``` DOM 节点演示

我是h1标签

我是p标签

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527363409) DOM节点的操作 1、创建节点 - 创建元素节点：使用 createElement() 方法。 - 创建属性节点：使用 createAttribute() 方法。 - 创建文本节点：使用 createTextNode() 方法。 2、插入子节点 - appendChild () 方法向节点添加最后一个子节点。 - insertBefore (插入的新的子节点，指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null，则默认插入到后面。 3、删除节点使用 removeChild() 方法。 ``` 父节点.removeChild(子节点); node.parentNode.removeChild(node); ``` 4、替换子节点：使用 replaceChild() 方法。 ``` node.replaceChild(newnode, oldnode); ``` 5、设置节点的属性 - 获取：getAttribute(name) - 设置：setAttribute(name, value) - 删除：removeAttribute(name) DOM事件事件三要素 - 事件源：触发事件的元素。 - 事件类型：事件的触发方式（比如鼠标点击或键盘点击）。 - 事件处理程序：事件触发后要执行的代码（函数形式，匿名函数）。鼠标单击事件 ```

请点击该文本

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527619355)![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527625599) 鼠标双击事件 ```

请点击该文本

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527688427)![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527692502) 鼠标移出悬停 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527724986)![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200607-1591527731613)

“Web开发基础”实验报告