前端：JavaScript-Web-Api DOM

JavaScript 的组成

组成部分	说明
Ecmascript	描述了该语言的语法和基本对象
DOM	描述了处理网页内容的方法和接口
BOM	描述了与浏览器进行交互的方法和接口

一、DOM

DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。

DOM 节点

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。

【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。

【根节点】特指 html 标签。

(1)获取DOM对象

根据ID获取：getElementById()、根据标签名获取：getElementsByTagName()、根据name获取：getElementsByName()、根据类名获取：getElementsByClassName()、选择器获取：querySelector() 、querySelectorAll()

(2)操作元素内容

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

(3)控制样式属性

通过修改行内样式 style 属性，实现对样式的动态修改。

操作类名(className) 操作CSS

通过 classList 操作类控制CSS

(4)自定义属性

在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头。

在DOM对象上一律以dataset对象方式获取。

(5)间歇函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

(6)事件：

①事件监听：获取 DOM 元素——>通过 addEventListener 方法为 DOM 节点添加事件监听 ——>   等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型—— >事件触发后，相对应的回调函数会被执行.

②事件类型：

鼠标事件：   click 代表鼠标单击       &&      dblclick 代表鼠标双击

`mouseenter 监听鼠标是否移入 DOM 元素   &&    `mouseleave 监听鼠标是否移出 DOM 元素

focus 获得焦点        &&       blur 失去焦点

键盘事件：keydown 键盘按下触发         &&       keyup 键盘抬起触发

(7)事件对象(e)：

ev.type 当前事件的类型         ev.clientX/Y 光标相对浏览器窗口的位置

ev.offsetX/Y 光标相于当前 DOM 元素的位置

(8)this:

①this 本质上是一个变量，数据类型为对象②函数的调用方式不同 this 变量的值也不同

③【谁调用 this 就是谁】是判断 this 值的粗略规则④函数直接调用时实际上 window.sayHi() 所以 this 的值为 window

(9)回调函数：

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。

(10)事件流：

如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件；

如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。

addEventListener 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发

addEventListener 第3个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认为 false

事件流只会在父子元素具有相同事件类型时才会产生影响

绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）

阻止冒泡：事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡。

(11)其他事件：

页面加载事件：window.addEventListener('load', function() { // xxxxx})

元素滚动事件：window.addEventListener('scroll', function() {  // xxxxx})

页面尺寸事件：window.addEventListener('resize', function() {// xxxxx})

(12)日期：

getFullYear 获取四位年份

getMonth 获取月份，取值为 0 ~ 11

getDate 获取月份中的每一天，不同月份取值也不相同

getDay 获取星期，取值为 0 ~ 6

getHours 获取小时，取值为 0 ~ 23

getMinutes 获取分钟，取值为 0 ~ 59

getSeconds 获取秒，取值为 0 ~ 59

时间戳：获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()

(13)DOM节点：

createElement 动态创建任意 DOM 节点

cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点

appendChild 在末尾（结束标签前）插入节点

insertBefore 在父节点中任意子节点之前插入新节点

removeChild 删除节点时一定是由父子关系。

childNodes 获取全部的子节点，回车换行会被认为是空白文本节点

children 只获取元素类型节点

parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。

previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。

nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。