# 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() 重新加载当前页面
上次更新时间: 9/29/2024, 9:19:56 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X