【DOM】初识DOM

近日在学JavaScript，发现很多知识都是学着学着就忘了，这让我有一种很大的挫败感，所以，我想改变一下自己的学习方式，先以写博客作为记录，来巩固自己的学习，温故而知新，才可以越走越远。冲鸭~

目录:
1.什么是DOM?
2.获取元素
3.事件基础
4.事件高级
5.操作元素
6.节点操作
总结

一、什么是DOM？

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

1.dom树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
• 节点：网页中的所有内容都是节点，DOM 中使用 node 表示

DOM 把以上内容都看做是对象

二、获取元素

2.1.获取页面元素

方式	表达式
根据ID获取	document.getElementById(‘id’);
根据标签名获取	element.getElementsByTagName(‘标签名’);
通过HTML5新增的方法获取	1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 2. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象 3. document.querySelectorAll(‘选择器’); // 根据指定选择器返回
特殊元素获取	1. doucumnet.body // 返回body元素对象 2. document.documentElement // 返回html元素对象

三、事件基础

3.1.事件三要素

• 事件源——事件被触发的对象
• 事件类型——如何触发
• 事件处理程序——通过一个匿名函数赋值的方式完成

3.2.执行事件三步骤

1. 获取事件源
2. 注册事件，绑定事件
3. 添加事件处理程序（采取函数赋值形式）

1.注册事件
1>传统注册方式

onclick = function() {}

2>方法监听注册方式

addEventListener('事件类型',{} [是否捕获])

第三个参数默认或false为冒泡，如果是填true则捕获

3.3.删除事件

onclick = null //传统注册方式
removeEventListener('事件类型',fn) //常用

3.4.常见的鼠标事件

鼠标事件	触发条件
.onclick	鼠标点击
.onmousedown / onmouseup	鼠标按下 松开弹起
.onfocus / onblur	获得焦点 / 失去焦点
.onmouseenter / onmouseleave	鼠标进入 / 离开
.onmouseover/onmousemove/onmouseout	鼠标经过(进入范围）/ 移动 / 离开

3.5.键盘事件

键盘事件	触发条件
keydown	按下触发
keyup	弹起触发
keypress	按动按键

注：keydown/keyup 不区分大小写，识别功能键
keypress 区分字母大小写，不能识别功能键

四、事件高级

4.1.DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

三个阶段：

• 捕获阶段
• 当前目标阶段
• 冒泡阶段

4.2.DOM事件流2

• 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。
• 事件捕获：网景最早提出，由DOM最顶层开始，然后逐级向下传播到最具体的元素的接收的过程。
• 事件委托：原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置在每个子节点。

4.3.事件对象

1. 什么是事件对象？

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

  eventTarget.onclick = function(event) {} 
  eventTarget.addEventListener('click', function(event) {}）
  // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 

1. 常见的事件对象
   
   e.target 和 this 的区别：
   this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
   e.target 是事件触发的元素
2. 常用的鼠标事件

4. 鼠标事件对象

3. 常用键盘事件

4.4

五、操作元素

5.1.获取、修改元素内容

element.innerText

element.innerHTML

区别一： 对 HTML 标签的识别
‘今天是：’
innerText不识别html标签,非标准
innerHTML识别html标签，W3C推荐
区别二： 对空格和换行的处理
innerText获取的内容不含空格
innerHTML获取的内容含空格

5.2.获取、修改元素样式

 element.style.样式名(驼峰) = ''

 element.className = ''

排他算法：如果有一组元素，想要某个元素实现某种样
式，需要用到循环的排他算法，即首先排除其他人，然后
再设置自己的样式。

 for(var i=0;i<a.length;i++){
 a[i].style.XXX = ''
 }

5.3.获取、修改元素属性

element.属性名 = ''

5.4.表单属性

input.value
//禁用
input.disabled
input.type

5.5.自定义属性

element.setAttribute('属性名',value)
element.getAttribute('属性名')
//移除属性
element.removeAttribute('属性名')

5.6.[h5新增][ie10以上] data-开头的属性：

 element.dataset
 element.dataset.属性名
 element.dataset['属性名']

六、节点操作

6.1.节点概述

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

• 元素节点 nodeType 为 1
• 属性节点 nodeType 为 2
• 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
  我们在实际开发中，节点操作主要操作的是元素节点

6.2.节点层级

1. 父级节点

 node.parentNode 

2. 子节点

 parentNode.childNodes（标准）
 //重点
 parentNode.children（非标准）
 //下面不兼容
 //返回第一个节点
 node.firstElementChild
 //最后一个节点
 node.lastElementChild
 //返回当前元素的下一个兄弟元素节点 
 node.nextElementSibling
 //返回当前元素的上一个兄弟元素节点
 node.previousElementSibling

6.3.操作节点

document.createElement('标签名') //动态创建元素节点
父节点.appendChild(新节点) //追加子节点
父节点.insertBefore(新节点,某个子节点) //插入到指定子节点之前 如ul.children[0](向前追加）
父节点.removeChild(子节点) //删除子节点 如ul.children[0]（删除首位）
node.cloneNode(是否深拷贝) //克隆当前节点 true 深拷贝 （标签+内容）false或空为浅拷贝 （只拷贝标签）

三种动态创建节点

• document.write()
• element.innerHTML
• document.createElement()
  区别：
  **1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
   总结：不同浏览器下，innerHTML 效率要比 creatElement 高**

总结

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

• document.write
• innerHTML
• createElement

增

1. appendChild
2. insertBefore

删

1. removeChild

改

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等

• 修改元素属性： src、href、title等
• 修改普通元素内容： innerHTML 、innerText
• 修改表单元素： value、type、disabled等
• 修改元素样式： style、className

查

• DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
• H5提供的新方法： querySelector、querySelectorAll 提倡
• 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

属性操作

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute移除属性

事件操作

给元素注册事件， 采取 事件源.事件类型 = 事件处理程序

鼠标事件	触发条件
.onclick	鼠标点击
.onmousedown / onmouseup	鼠标按下 松开弹起
.onfocus / onblur	获得焦点 / 失去焦点
.onmouseenter / onmouseleave	鼠标进入 / 离开
.onmouseover/onmousemove/onmouseout	鼠标经过(进入范围）/ 移动 / 离开

学习之路漫漫，加油！

拾花鸟之一趣，照月风之长路。——万叶