DOM事件与类型，节点的属性和关系

DOM是啥

文档对象模型 （document-object-module）
HTMLL文档的标签（对象）变成了一颗棵树

• DOM是干啥的
  描绘了一个层次化的节点树 => DOM树
  为开发人员提供API（应用程序编程接口）
  提供方法：增删改查
  选取文档元素
• DOM的节点层次
  DOM可以将任何HTML文档描绘成一个多层节点构成的结构
  节点分为多种类型，每种类型分别表示文档中不同的信息及标记，每个节点都拥有各自的特点、数据和方法
• 文档节点
  document = 文档节点
  只有一个子节点
  html元素 = 根元素/文档元素
  文档元素是文档最外层元素

什么是DOM事件

• 事件定义
  事件就是文档或窗口中发生一些特定的交互瞬间
• 事件流：从页面中接收事件的顺序
  1、事件冒泡
  IE的事件流叫做事件冒泡
  事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
  （由深至浅）
  所有现代浏览器都支持事件冒泡一直会冒泡到window对象上
  2、事件捕获
  Netscape?Communicator团队提出的另一种事件流叫做事件捕获
  由不太具体的节点更早地接收到事件，由最具体的节点应该最后接收到事件
• DOM事件流的阶段
  事件捕获阶段
  处于目标阶段
  事件冒泡阶段
  注意：
  在DOM事件流中，实际的目标在捕获阶段不会接收到事件，这就意味着在捕
  获阶段，事件从document到再到后就停止了
  在下一个阶段是处于目标阶段，于是事件在
  上发生，并在事件处理中被
  看做了冒泡阶段的一部分，然后冒泡阶段发生，事件又传播回文档
  but
  高版本浏览器都会在捕获阶段触发事件对象上的事件，结果，就有两个
  机会在目标对象上面操作事件

节点的属性

• nodeName: 元素的标签名，切记是大写形式
• nodeValue: text节点或comment节点的内容
• nodeType: 节点的类型
  每个节点有节点类型 - nodeType
  总共有12种节点类型，由1-12数值代表
  元素节点 = 1 => Node.ELEMENT_NODE(1)
  属性节点 = 2 => Node.ATTRIBUTE_NODE(2)
  文本节点 = 3 => Node.TEXT_NODE(3) #text
  注释节点 = 8 => Node.COMMENT_NODE(8) #comment
  文档节点 = 9 => Node.DOCUMENT_NODE(9)
  节点关系
• parentNode: 该节点的父节点
• Document对象的父节点是null，木有父节点
• childNodes
  只读的类数组对象(NodeList)对象，它是该节点的子节点的实时表示(动态查
  询的结果)
• children
  由于IE9之前的版本与其他浏览器在处理文本节点中的空白符有差异，因此出
  现了children属性
  这个属性是HTMLCollection的实例，只包含元素中元素的子节点
• firstChild/lastChild
  该节点的子节点找那个的第一个和最后一个，如果该节点没有子节点则为null
• nextSibling/previoursSibling
  该节点的兄弟节点中的前一个和下一个，具有相同父节点的两个为兄弟节点
  特殊情况
  对于元素之间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会
  返回文本节点
  这就导致了在使用childNodes和firstChild等属性的行为不一致
  为了弥补该差异性，Element Traversal规范新定义了一组属性
• childElementCount: 返回子元素（不包括文本节点和注释）的个数
• firstElementChild: 指向第一个子元素，firstChild的元素版
• lastElementChild: 指向最后一个子元素，lastChild的元素版
• previousElementSibling: 指向前一个同辈元素； previousSibling的元素
  版
• nextElementSibling: 指向后一个同辈元素，nextSibling的元素版

选取文档元素

1. 通过ID选取元素
   唯一性
   找不到返回null
   找到了返回该元素
   var ele = document.getElementById('id名');

2. 通过类名选取元素(H5)
   返回的匹配类名的元素
   找不到返回空数组
   var eles = document.getElementsByClassName('类名');

3. 通过名字选取元素
   var eles = document.getElementsByName('name');

4. 通过标签名选取元素
   var eles = document.getElementsByTagName('标签名');

5. 通过CSS选择器选取元素
   var ele = document.querySelector(选择器); // div>p
   返回与该模式匹配的第一个元素，如果没有则返回null
   var eles = document.querySelectorAll(选择器) // div>p, div>span
   返回NodeList，类似一组元素的快照, 而非不断对文档进行搜索的动态查询