Web前端核心重点JavaScript函数BOM、DOM必会知识总结
JS高级核心知识点和常用方法总结，应同学需求，整理了前端实际开发中必会的最最核心的 JS函数，BOM，DOM，定时器，延时器等常用方法和属性值，这些内容都是必学内容，已经全部整理出来了，方便我们查缺补漏，建立好知识
总结：JS函数的定义调用，参数，返回值，闭包，立即执行函数，BOM，DOM，定时器，延时器等常用方法，必学版；
函数的定义与调用
单词：function
注释：定义函数。有如下两种方式；
1、function 函数名() {}; 这种声明方式，预解析阶段函数会提升；
2、var 函数名 = function() {}; 这种声明方式，预解析阶段只会提升函数名，后面的函数体function() {}不会提升；
3、函数调用是在函数名后面添加括号；示例： fn()表示调用函数fn；
函数的参数
单词：arguments
注释：接收传入函数的实参列表，是一个类数组对象（与数组类似，拥有length属性，可以通过下标访问某个值，但是不可以使用数组的方法）
1、形参：定义函数时设置的参数；
2、实参：调用函数时传入的参数；
函数的返回值
单词：return
注释：设置函数的返回值，调用函数时，遇到return语句会立即退出函数，并设置函数的返回值；
闭包
单词：closure
注释：函数本身和该函数声明时所处的环境状态的组合，简单理解就是闭包可以在一个内层函数中访问到其外层函数的作用域。
示例：下面这段代码中的f2函数，就是闭包，可以访问到外层函数f1作用域的中变量n的值
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999立即执行函数
单词：IIFE
注释：Immediately Invoked Function Expression的首字母缩写，立即调用函数表达式，是一种特殊的JavaScript函数写法，一旦被定义，就立即被调用。示例：
(function(){
//函数体
})()DOM的基本概念
1).单词：DOM
注释：文档对象模型(Document Object Model)，是JavaScript操作HTML文档的接口，它最大的特点就是将文档表示为节点树。
2).单词：document
注释：document对象表示整个HTML文档，它是DOM节点树的根
节点类型
单词：nodeType
注释：返回节点的类型（不常用，了解即可）
常见的返回值如下：
1、nodeType 属性返回 1，表示节点是一个元素节点
2、nodeType 属性返回 3，表示节点是一个文本节点
3、nodeType 属性返回 8，表示节点是一个注释节点
4、nodeType 属性返回 9，表示节点是document节点
5、nodeType 属性返回 10，表示节点是DTD节点
节点的关系
1）. 单词：firstChild
注释：返回第一个子节点，包括文本节点、注释节点和元素节点等所有类型的节点
2）. 单词：firstElementChild
注释：返回第一个子元素节点
3) . 单词：lastChild
注释：返回最后一个子节点，包括文本节点、注释节点和元素节点等所有类型的节点
4) . 单词：lastElementChild
注释：返回最后一个子元素节点
5) . 单词：lastElementChild
注释：返回所有的子节点， 包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）
6) . 单词：children
注释：返回所有的子元素节点
7) . 单词：parentNode
注释：返回父元素节点
8) . 单词：previousSibling
注释：返回前一个兄弟节点，包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）
9) . 单词：previousElementSibling
注释：返回前一个兄弟元素节点（不常用，了解即可）
10) . 单词：nextSibling
注释：返回同级的后一个节点，包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）
11) . 单词：nextElementSibling
注释：返回同级的后一个元素节点（不常用，了解即可）
访问元素节点常用的方法
1) . 单词：document.getElementById()
注释：通过id获取元素，返回一个dom对象
例如：document.getElementById(""demo"");获取id属性值为demo的元素
2) . 单词：
document.getElementsByTagName()
注释：通过标签名获取元素，以集合的形式返回
例如：
document.getElementsByTagName(""p""); 获取所有的p标签元素
3) . 单词：
document.getElementsByClassName()
注释：通过类名获取元素，以集合的形式返回
例如：
document.getElementsByClassName(""box"");获取所有类名为box的元素
4).单词：document.querySelector()
注释：通过css选择器获取第一个符合条件的元素，返回一个DOM元素
例如：document.querySelector("".item"") 获取类名为item的第一个元素
5).单词：document.querySelectorAll()
注释：通过css选择器获取所有的元素，以集合的形式返回
例如：document.querySelectorAll("".item"") 获取类名为item所有的元素；
节点的创建、添加、移出和克隆
1）单词：document.createElement()
注释：创建一个指定标签名的 HTML 元素
2) 单词：appendChild()
注释：将一个节点作为最后一个子节点添加到指定的父节点
3) 单词：removeChild()
注释：删除指定的子节点
4) 单词：insertBefore()
注释：在已有的子节点前插入一个新的子节点
5) 单词：cloneNode()
注释：克隆节点，如果传递给它的参数是 true，则该节点的所有后代节点也都会被克隆。如果为false，则只克隆节点本身。
节点的操作
1）单词：innerText
注释：以纯文本的形式设置或者获取元素的文本内容（不常用，了解即可）
2）单词：className
注释：元素节点的一个属性，用来设置或返回元素的class属性值
示例：oBox.className = "active"
3）单词：style
注释：元素节点的一个属性，用来设置元素节点的css样式
例如：box.style.color=""red"" 改变box元素节点的字体为红色
3）单词：src
注释：元素节点的一个属性，用来设置元素节点src属性值
例如： oImg.src="./images/2.jpg"
4）单词：href
注释：元素节点的一个属性，用来设置元素节点href属性值
例如： oLink.href="http://www.***.com"
5）单词：setAttribute()
注释：给元素节点设置指定的属性，并为其赋指定的值
例如：oBox.setArrtibute('data-n', 10)
6）单词：getAttribute()
注释：获取元素节点指定的属性值
例如：oBox.getArrtibute('data-n')
7）单词：dataset
注释：元素节点的一个属性，用来设置或返回元素以data-*方式自定义的属性
常见的鼠标事件
（DOM0级事件监听方式：on +事件名）
1）单词：onclick ；注释：监听鼠标单击事件
2）单词：ondblclick； 注释：监听鼠标双击事件
3）单词：onmousedown； 注释：监听鼠标按下事件
4）单词：onmouseup； 注释：监听鼠标松开事件
5）单词：onmousemove； 注释：监听鼠标移动事件
6）单词：onmouseenter； 注释：监听鼠标移入事件，不存在事件冒泡
7）单词：onmouseleave； 注释：监听鼠标离开事件，不存在事件冒泡
8）单词：onmouseover； 注释：监听鼠标移入事件，存在事件冒泡
9）单词：onmouseout； 注释：监听鼠标离开事件，存在事件冒泡
10）单词：onmousewheel； 注释：监听鼠标滚轮事件（不常用，了解即可）
键盘事件（DOM0级事件监听方式：on +事件名）
1）单词：onkeydown ；
注释：监听某个键盘按键被按下，可以监听上下左右箭头等系统按键；
2）单词：onkeypress；
注释： 监听某个键盘按键被按下，无法监听到系统按键；
3）单词：onkeyup；
注释： 监听某个键盘按键被松开，可以监听上下左右箭头等系统按键；
常见的表单事件（DOM0级事件监听方式：on +事件名）
1）单词：onchange ；注释：当表单元素的内容发生变化所触发的事件；
2）单词：onfocus ；注释：当元素获得焦点时触发的事件，例如：tab键或者点击鼠标；
3）单词：onblur ；注释：当元素失去焦点时触发的事件；
4）单词：onsubmit； 注释：当提交表单时触发的事件；
5）单词：onreset； 注释：当重置表单时触发的事件；
常见的页面监听事件（DOM0级事件监听方式：on +事件名
1）单词：onload ；注释：监听页面或图像加载完成事件
2）单词：onunload ；注释：监听用户退出页面事件（不常用，了解即可）
DOM2级事件监听
单词：addEventListener()
注释：监听事件并添加到指定的元素
1、方法中接收三个参数如下：
（1）第一个参数是字符串，表示要监听的事件名，必须传入
（2）第二个参数是函数，指定事件触发时要执行的函数，必须传入
（3）第二个参数是布尔值，指定事件是否在捕获或冒泡阶段执行，可选
2、示例：oBox.addEventListener('click', function() {}, true) 在捕获阶段监听oBox的点击事件
事件的传播
1）单词：capturing phase
注释：捕获阶段，由外向内传播的，也就是当前事件触发时，先触发当前元素的最外层的祖先元素的同类型事件，然后再向内传播给后代元素
2）单词：Bubbling phase
注释：冒泡阶段，由内向外传播，也就是当事件触发时，先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，触发祖先元素的同类型事件
事件对象
单词：event；注释： 返回事件的状态
事件对象常用的属性
1）单词：target；注释： 返回当前触发事件的元素
2）单词：current；注释：Target 返回监听事件的元素
3）单词：clientX； 注释：返回鼠标指针相对于浏览器的水平坐标
4）单词：clientY 注释：返回鼠标指针相对于浏览器的垂直坐标
5）单词：pageX ；注释：返回鼠标指针相对于整个网页的水平坐标
6）单词：pageY ；注释：返回鼠标指针相对于整个网页的垂直坐标
7）单词：offsetX； 注释：返回鼠标指针相对于事件源元素的水平坐标
8）单词：offsetY ；注释：返回鼠标指针相对于事件源元素的垂直坐标
9）单词：charCode；注释：通常用于onkeypress事件，返回用户按下按键对应的码值，区分大小写；示例：按下键盘a，对应的值是97， 按下键盘A，对应的值是65
9）单词：keyCode；注释：通常用于onkeydown和onkeyup事件，返回用户按下按键的码值，不区分大小写。示例：按下键盘a或A， 对应的值是65
9）单词：deltaY； 注释：返回onmousewheel事件触发时，滚轮滚动的方向，向下滚动时返回正值，向上滚动时，返回负值（不常用，了解即可）
事件对象常用的方法
1）单词：preventDefault()； 注释：阻止浏览器默认行为；
2）单词：stopPropagation() ；注释：阻止事件传播；
定时器和延时器
1）单词：setInterval() ；
注释：定时器，重复调用一个函数，在每次调用之间具有固定的时间间隔
2）单词：clearInterval()；
注释：清除定时器
3）单词：setTimeout() ；
注释：延时器，当指定时间到了之后，会执行一次函数，不再重复执行
4）单词：clearTimeout()；
注释：清除延时器
BOM相关的基本概念
1）单词：BOM
注释：浏览器对象模型（Browser Object Model），是js与浏览器窗口交互的接口
2）单词：window
注释：window 对象是浏览器中打开的窗口，注意事项：
1、这个窗口中包含DOM结构，window.document属性就表示document对象
2、全局变量会成为window对象的属性
3、内置函数普遍是window的方法，如：alert()等方法
3）单词：navigator navigator
注释：对象含有关浏览器的信息，是指 window 对象的一部分，可以通过 window.history 属性对其进行访问
4）单词：history history
注释：对象包含用户（在浏览器窗口中）访问过的 URL，是 window 对象的一部分，可以通过 window.history 属性对其进行访问
5）单词：location location
注释：对象包含有关当前 URL 的信息，是 Window 对象的一个部分，可以通过 window.location 属性来访问
window对象的常用属性
1）单词：innerHeight ；注释：返回浏览器窗口的内容区域的高度，包含水平滚动条的高度
2）单词：innerWidth ；注释：返回浏览器窗口的内容区域的宽度，包含垂直滚动条的宽度
3）单词：
document.documentElement.clientWidth ；注释：返回浏览器窗口的内容区域的宽度，不包含滚动条
4）单词：outerHeight ；注释：返回浏览器窗口的外部高度，包含水平滚动条的高度和浏览器窗口上下边框的高度（不常用，了解即可）
5）单词：outerWidth ；注释：返回浏览器窗口的内容高度，包含垂直滚动条的宽度和浏览器窗口左右边框的宽度（不常用，了解即可）
6）单词：scrollY ；注释：返回文档当前垂直滚动的距离
7）单词：
document.documentElement.scrollTop
window对象的常用事件
1）单词：onresize ；注释：监听窗口改变大小事件；
2）单词：onscroll ；注释：监听窗口滚动事件；
navigator对象的常用属性
1）单词：appName；注释： 返回浏览器官网名称；
2）单词：appVersion；注释： 返回浏览器版本；
3）单词：userAgent ；注释：返回浏览器的用户代理信息；
4）单词：platform；注释： 返回用户操作系统；
history对象的常用方法
1）单词：back() ；注释：表示回退到浏览器历史记录里的上一页，等同于点击浏览器回退按钮；
2）单词：go(-1) ；注释：与history()方法的作用一样；
location对象的常用属性和方法
1）单词：href；注释： 设置或返回完整的URL地址；
2）单词：search；注释： 设置或返回从问号 (?) 开始的 URL（查询部分）；
3）单词：reload() ；注释：重新加载当前页面；
以上内容也是整个JS学习中的核心重点，可以作为学习路径，也可作为面试复习的知识清单
有关【HTML/HTML5，CSS/CSS3，JS属性和常用方法】完整版的总结在往期的笔记中已经发布，可以看往期作品！
- 赶紧收藏，头条超详细Web前端入门到精通必学的标签及属性大全
- web前端开发中必会JavaScript属性和常用方法
- Web前端入门到精通必会的CSS样式和属性大全
下期笔记总结 JS重难点：
面向对象、构造函数与类、原型原型链，内置对象，继承，设计模式 部分的内容，一个个来梳理，喜欢记得点赞关注收藏了 做我的粉丝我宠你
还需要总结什么 ？留言我会记录下来，根据需求来逐一梳理 ^_^
文章来自：arry老师博客www.arryblog.com，内容已经同步到博客！
