WEB API —— DOM文档对象模型（二）

#节点操作                                             ##Dom节点                                                     ##操作

#时间对象

#事件对象

#事件流

#事件委托

一、节点操作

1. DOM节点 ：DOM树里每一个内容都称之为节点

2. 节点类型

2.1 元素节点

 所有的标签 比如 body、 div ;                      html 是根节点

2.2 属性节点

所有的属性 比如 href

2.3 文本节点

所有的文本

2.4 其他

3. 节点操作

3.1 查                                                             3.1.1 父节点查找 parentNode 属性                   子元素.parentNode

返回最近一级的父节点，找不到返回为null

 3.1.2 子节点查找                                  childNodes   获得所有子节点、包括文本节点（空格、换行）、注释节点等                 children  仅获得所有元素节点，返回的还是一个伪数组                                                       父元素.children

 3.1.3 兄弟节点查找                                      1.下一个兄弟节点   nextElementSibling 属性  2.上一个兄弟节点 previousElementSibling 属性

3.2 增

3.2.1 创建节点                                                      即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点         document.createEvent('标签名')

3.2.2 追加节点                                                       要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.inseartBefore(要插入的元素，在那个元素前面)

克隆节点：元素.cloneNode(布尔值)

       复制一个原有的节点 ，把复制的节点放入到指定的元素内部

       布尔值若为true，则代表克隆时会包含后代节点一起克隆 ; 若为false，则代表克隆时不包含后代节点 。默认为false

3.3 删

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素)

二、时间对象

1. 实例化

let 变量 ＝ new Date()     //获得当前时间          let 变量 ＝ new Date('1999-09-09')    //获得指定时间          

2. 时间对象方法

getFullYear() 获得年份 获取四位年份

getMonth() 获得月份 取值为 0 ~ 11

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

getDay() 获取星期 取值为 0 ~ 6

getHours() 获取小时 取值为 0 ~ 23

getMinutes() 获取分钟 取值为 0 ~ 59

getSeconds() 获取秒 取值为 0 ~ 59

3. 时间戳

       时间戳 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

getTime()

+new Date()

Date().now()

区别：Date().now()无需实例化，但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

4. 重绘和回流

       由于元素的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color等), 称为重绘。

       当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过 程称为回流。

重绘不一定引起回流，而回流一定会引起重绘。

三、事件对象

1. 概念

       也是个对象，这个对象里有事件触发时的相关信息，event,e  (事件绑定的回调函数的第一个参数就是事件对象)                                  元素.addEventListener('click', funcation(e) {})

2. 常用属性

type   获取当前的事件类型 ;                clientX/clientY   获取光标相对于浏览器可见窗口左上角的位置 ;                          offsetX/offsetY   获取光标相对于当前DOM元素左上角的位置 ;                                        key 用户按下的键盘键的值 。

四、时间流

1. 概念

       事件流指的是事件完整执行过程中的流动路径。当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。简单来说：捕获阶段是 从父到子;冒泡阶段是从子到父。

事件冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。事件冒泡是默认存在的。

事件捕获： 从DOM的根元素开始去执行对应的事件 (从外到里) 事件捕获需要写对应代码才能看到效果 代码。

注： addEventListener第三个参数传入true代表是捕获阶段触发（很少使用） 若传入false代表冒泡阶段触发，默认就是false 。

若是用 L0 事件监听，则只有冒泡阶段，没有捕获。

 

2. 阻止事件流动： 时间对象.stopPropagation()

    阻止默认行为： e.preventDefault()

五、事件委托

1. 概念

       事件委托是利用事件流的特征解决一些开发需求的知识技巧。

2. 优点：给父级元素加事件（可以提高性能）

3. 原理：利用事件冒泡的特点， 给父元素添加事件，子元素可以触发

4. 实现：事件对象.target 获得真正触发事件的元素