JavaScript 函数、BOM、DOM

TIP

Web 前端入门到精通必会的 JavaScript 核心重点知识梳理

1、函数的定义、参数和返回值

名称	描述
function	定义函数。有如下两种方式： 1、function 函数名() {}; 这种声明方式，预解析阶段函数会提升 2、var 函数名 = function() {}; 这种声明方式，预解析阶段只会提升函数名，后面的函数体 function() {}不会提升 3、函数调用是在函数名后面添加括号， 示例： fn()表示调用函数 fn
arguments	接收传入函数的实参列表，是一个类数组对象（与数组类似，拥有 length 属性，可以通过下标访问某个值，但是不可以使用数组的方法） 1、形参：定义函数时设置的参数 2、实参：调用函数时传入的参数
return	设置函数的返回值，调用函数时，遇到 return 语句会立即退出函数，并设置函数的返回值

2、闭包和立即执行函数

名称	描述
closure	函数本身和该函数声明时所处的环境状态的组合，简单理解就是闭包可以在一个内层函数中访问到其外层函数的作用域。 示例：下面这段代码中的 f2 函数，就是闭包，可以访问到外层函数 f1 作用域的中变量 n 的值 function f1() { var n = 888; function f2() { alert(n); } return f2; } var result = f1(); result(); // 888
IIFE	Immediately Invoked Function Expression 的首字母缩写，立即调用函数表达式，是一种特殊的 JavaScript 函数写法，一旦被定义，就立即被调用。示例： (function () { //函数体 })();

3、DOM 的基本概念

名称	描述
DOM	文档对象模型(Document Object Model)，是 JavaScript 操作 HTML 文档的接口，它最大的特点就是将文档表示为节点树。
document	document 对象表示整个 HTML 文档，它是 DOM 节点树的根

4、节点类型

名称	描述
nodeType	返回节点的类型（不常用，了解即可） 常见的返回值如下： 1、nodeType 属性返回 1，表示节点是一个元素节点 2、nodeType 属性返回 3，表示节点是一个文本节点 3、nodeType 属性返回 8，表示节点是一个注释节点 4、nodeType 属性返回 9，表示节点是 document 节点 5、nodeType 属性返回 10，表示节点是 DTD 节点

5、节点的关系

名称	描述
firstChild	返回第一个子节点，包括文本节点、注释节点和元素节点等所有类型的节点
firstElementChild	返回第一个子元素节点
lastChild	返回最后一个子节点，包括文本节点、注释节点和元素节点等所有类型的节点
lastElementChild	返回最后一个子元素节点
childNodes	返回所有的子节点， 包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）
children	返回所有的子元素节点
parentNode	返回父元素节点
previousSibling	返回前一个兄弟节点，包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）
previousElementSibling	返回前一个兄弟元素节点（不常用，了解即可）
nextSibling	返回同级的后一个节点，包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）
nextElementSibling	返回同级的后一个元素节点（不常用，了解即可）

6、访问元素节点常用的方法

名称	描述
document.getElementById()	通过 id 获取元素，返回一个 dom 对象 例如：document.getElementById(""demo"");获取 id 属性值为 demo 的元素
document.getElementsByTagName()	通过标签名获取元素，以集合的形式返回 例如：document.getElementsByTagName(""p""); 获取所有的 p 标签元素
document.getElementsByClassName()	通过类名获取元素，以集合的形式返回 例如：document.getElementsByClassName(""box"");获取所有类名为 box 的元素
document.querySelector()	通过 css 选择器获取第一个符合条件的元素，返回一个 DOM 元素 例如：document.querySelector("".item"") 获取类名为 item 的第一个元素
document.querySelectorAll()	通过 css 选择器获取所有的元素，以集合的形式返回 例如：document.querySelectorAll("".item"") 获取类名为 item 所有的元素

7、节点的创建、添加、移出和克隆

方法名称	描述
document.createElement()	创建一个指定标签名的 HTML 元素
appendChild()	将一个节点作为最后一个子节点添加到指定的父节点
removeChild()	删除指定的子节点
insertBefore()	在已有的子节点前插入一个新的子节点
cloneNode()	克隆节点 如果传递给它的参数是 true，则该节点的所有后代节点也都会被克隆。如果为 false，则只克隆节点本身

8、节点的操作

名称	描述
innerText	以纯文本的形式设置或者获取元素的文本内容（不常用，了解即可）
className	元素节点的一个属性，用来设置或返回元素的 class 属性值 示例：oBox.className = "active"
style	元素节点的一个属性，用来设置元素节点的 css 样式 例如：box.style.color=""red"" 改变 box 元素节点的字体为红色
src	元素节点的一个属性，用来设置元素节点 src 属性值 例如： oImg.src="./images/2.jpg"
href	元素节点的一个属性，用来设置元素节点 href 属性值 例如： oLink.href="http://www.baidu.com"
setAttribute()	给元素节点设置指定的属性，并为其赋指定的值 例如：oBox.setArrtibute('data-n', 10)
getAttribute()	获取元素节点指定的属性值 例如：oBox.getArrtibute('data-n')
dataset	元素节点的一个属性，用来设置或返回元素以 data-*方式自定义的属性

9、常见的鼠标事件

TIP

DOM 0 级事件监听方式：on + 事件名

名称	描述
onclick	监听鼠标单击事件
ondblclick	监听鼠标双击事件
onmousedown	监听鼠标按下事件
onmouseup	监听鼠标松开事件
onmousemove	监听鼠标移动事件
onmouseenter	监听鼠标移入事件，不存在事件冒泡
onmouseleave	监听鼠标离开事件，不存在事件冒泡
onmouseover	监听鼠标移入事件，存在事件冒泡
onmouseout	监听鼠标离开事件，存在事件冒泡
onmousewheel	监听鼠标滚轮事件（不常用，了解即可）

10、键盘事件

TIP

DOM 0 级事件监听方式：on + 事件名

名称	描述
onkeydown	监听某个键盘按键被按下，可以监听上下左右箭头等系统按键
onkeypress	监听某个键盘按键被按下，无法监听到系统按键
onkeyup	监听某个键盘按键被松开，可以监听上下左右箭头等系统按键

11、常见的表单事件

TIP

DOM 0 级事件监听方式：on + 事件名

名称	描述
onchange	当表单元素的内容发生变化所触发的事件
onfocus	当元素获得焦点时触发的事件，例如：tab 键或者点击鼠标
onblur	当元素失去焦点时触发的事件
onsubmit	当提交表单时触发的事件
onreset	当重置表单时触发的事件

12、常见的页面监听事件

TIP

DOM 0 级事件监听方式：on + 事件名

名称	描述
onload	监听页面或图像加载完成事件
onunload	监听用户退出页面事件（不常用，了解即可）

13、DOM 2 级事件监听

名称	描述
addEventListener()	监听事件并添加到指定的元素 1、方法中接收三个参数如下： （1）第一个参数是字符串，表示要监听的事件名，必须传入 （2）第二个参数是函数，指定事件触发时要执行的函数，必须传入 （3）第二个参数是布尔值，指定事件是否在捕获或冒泡阶段执行，可选 2、示例：oBox.addEventListener('click', function() {}, true) 在捕获阶段监听 oBox 的点击事件

14、事件的传播

名称	描述
capturing phase	捕获阶段，由外向内传播的，也就是当前事件触发时，先触发当前元素的最外层的祖先元素的同类型事件，然后再向内传播给后代元素
Bubbling phase	冒泡阶段，由内向外传播，也就是当事件触发时，先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，触发祖先元素的同类型事件

15、事件对象

名称	描述
event	返回事件的状态

16、事件对象常用的属性

名称	描述
target	返回当前触发事件的元素
currentTarget	返回监听事件的元素
clientX	返回鼠标指针相对于浏览器的水平坐标
clientY	返回鼠标指针相对于浏览器的垂直坐标
pageX	返回鼠标指针相对于整个网页的水平坐标
pageY	返回鼠标指针相对于整个网页的垂直坐标
offsetX	返回鼠标指针相对于事件源元素的水平坐标
offsetY	返回鼠标指针相对于事件源元素的垂直坐标
charCode	通常用于 onkeypress 事件，返回用户按下按键对应的码值，区分大小写 示例：按下键盘 a，对应的值是 97， 按下键盘 A，对应的值是 65
keyCode	通常用于 onkeydown 和 onkeyup 事件，返回用户按下按键的码值，不区分大小写。 示例：按下键盘 a 或 A， 对应的值是 65
deltaY	返回 onmousewheel 事件触发时，滚轮滚动的方向，向下滚动时返回正值，向上滚动时，返回负值（不常用，了解即可）

17、事件对象常用的方法

名称	描述
preventDefault()	阻止浏览器默认行为
stopPropagation()	阻止事件传播

18、定时器和延时器

名称	描述
setInterval()	定时器，重复调用一个函数，在每次调用之间具有固定的时间间隔
clearInterval()	清除定时器
setTimeout()	延时器，当指定时间到了之后，会执行一次函数，不再重复执行
clearTimeout()	清除延时器

19、BOM 相关的基本概念

名称	描述
BOM	浏览器对象模型（Browser Object Model），是 js 与浏览器窗口交互的接口
window	window 对象表示浏览器中打开的窗口，注意事项： 1、这个窗口中包含 DOM 结构，window.document 属性就表示 document 对象 2、全局变量会成为 window 对象的属性 3、内置函数普遍是 window 的方法，如：alert()等方法
navigator	navigator 对象含有关浏览器的信息，是 window 对象的一部分，可通过 window.history 属性对其进行访问
history	history 对象包含用户（在浏览器窗口中）访问过的 URL，是 window 对象的一部分，可通过 window.history 属性对其进行访问
location	location 对象包含有关当前 URL 的信息，是 Window 对象的一个部分，可通过 window.location 属性来访问

20、window 对象的常用属性

名称	描述
innerHeight	返回浏览器窗口的内容区域的高度，包含水平滚动条的高度
innerWidth	返回浏览器窗口的内容区域的宽度，包含垂直滚动条的宽度
document.documentElement.clientWidth	返回浏览器窗口的内容区域的宽度，不包含滚动条
outerHeight	返回浏览器窗口的外部高度，包含水平滚动条的高度和浏览器窗口上下边框的高度（不常用，了解即可）
outerWidth	返回浏览器窗口的内容高度，包含垂直滚动条的宽度和浏览器窗口左右边框的宽度（不常用，了解即可）
scrollY	返回文档当前垂直滚动的距离
document.documentElement.scrollTop	要获取当前页面的滚动条纵坐标位置

21、window 对象的常用事件

名称	描述
onresize	监听窗口改变大小事件
onscroll	监听窗口滚动事件

22、navigator 对象的常用属性

名称	描述
appName	返回浏览器官网名称
appVersion	返回浏览器版本
userAgent	返回浏览器的用户代理信息
platform	返回用户操作系统

23、history 对象的常用方法

名称	描述
back()	表示回退到浏览器历史记录里的上一页，等同于点击浏览器回退按钮
go(-1)	与 history()方法的作用一样

24、location 对象的常用属性和方法

名称	描述
href	设置或返回完整的 URL 地址
search	设置或返回从问号 (?) 开始的 URL（查询部分）
reload()	重新加载当前页面