跟着月影学 JavaScript ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

window 是浏览器的顶级对象，当调用 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);

注：BOM 的操作方法还有很多，但是一般情况下我们常用的就是上面所介绍的。有兴趣的可以自行百度了解 BOM 的更多操作方法和介绍。

DOM 能够操作 HTML 的内容。

改变 HTML 输出流

在 JavaScript 中，使用 document.write() 可用于直接向 HTML 输出流写内容。比如：

document.write("新设置的内容

标签也可以生成

");

改变 HTML 内容

使用 innerHTML 属性改变 HTML 内容。

DOM 能够改变 HTML 元素的样式。语法为： document.getElementById(id).style.property = new style();

DOM节点的操作

获取节点

要操作节点，首先我们要找到节点。主要有以下三种办法：

1. 通过 ID 找到 HTML 元素：使用方法 getElementById() 通过元素的 ID 而选取元素。
2. 通过标签名找到 HTML 元素：使用方法 getElementsByTagName() 来选取元素，如果有多个同类型标签，那么我们可以通过下标来确认。
3. 通过类名来找到 HTML 元素：使用方法 getElementsByClassName() 通过元素的类名来选取元素。

DOM 节点的操作

1. 创建节点

   • 创建元素节点：使用 createElement() 方法。比如： var par = document.createElement("p");

   • 创建属性节点：使用 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事件

常用的事件

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时