Kidney日拱一卒JavaScript系列Chapter9 DOM

Chapter 9 文档对象模型

1、DOM树

DOM是HTML和XML文档提供的一系列API的集合。

DOM将HTML和XML文档描绘成一个由多层次节点构成的树结构，文档中所有的元素都是一个节点。

树结构的根节点（又称文档元素）有且只有一个。

HTML文档的根节点始终是<html>，XML文档则可以是任何元素。

1.1 使用nodeType检测节点类型

节点（node）一共有12种类型，每种类型用一个1~12之中的数字表示。

操作节点前通常需要检测节点类型，原因是我们获取的子节点集合常常混合多类节点。

例如：

<ul>

<li></li>

<li></li>

<li></li>

</ul>

ul有七个子节点，包括三个<li>和四个空白文本节点（但在IE看来只有三个<li>）。

1.2 节点通用的属性及方法

1.3 document的属性和方法（省略了一些不常用的、浏览器支持差异大的属性)

1.4 Element元素节点的属性和方法

1.5 Text文本节点的属性和方法

2、事件

2.1 事件类型

2.2 事件对象 Event Object

每一种事件都存在一个事件对象，该对象的属性中保存了与该事件相关的一些数据，同时还保存着一些方法。不同的事件其事件对象的属性值有所不同，主要有这么几类：

2.3 事件流 Event Flow

由于html中存在大量嵌套、层叠关系，因此必须规定某种顺序去查询究竟是谁绑定了这个事件，从而才能触发相应的事件处理程序。这个顺序（事件传播机制）被称为“事件流”。

事件流有三种类型：

事件冒泡。从事件发生的最具体的节点开始，沿着DOM树向上依次查询，直到body => html => document。

事件捕获。与事件冒泡刚好相反。

DOM事件流。DOM事件流规定了三个阶段：捕获，目标和冒泡。为啥要这样设计一个看似多余的“捕获”阶段，《JavaScript权威指南》中的解释是：捕获阶段提供了在事件传播到目标之前将其拦截（捕获）的机会。

2.5 事件处理程序 Event Handler

事件处理程序就是对事件的响应动作，用on+事件名称表示，如onclick，onload等。

事件绑定Event Register

方式一：直接在HTML标签中添加事件属性。

如：<input onclick=＂submit()＂>，引号里是js代码。

这里可以在函数中直接访问自身的属性。

如：<div id=＂hello＂ onclick=＂alert(id)＂></div> // hello

方式二：DOM0级事件处理程序，给元素绑定事件方法。

var el = document.getElementById(＂ID＂);

el.onclick = fucntion(){}

方式三：DOM2级事件处理程序，addEventListener()和removeEventListener()

接受三个参数：事件名称，事件处理程序，布尔值(true表示捕获阶段调用，false表示冒泡阶段调用)

如果要用removeEventListener()删除某个事件处理程序，必须保证其参数与addEventListener()完全一致，而且如果事件处理程序使用的是匿名函数，是无法删除的。

方式四：自定义

因为IE定义了自己的注册事件处理程序的函数，为了实现兼容，就只好自定义方法。

见《高级》P360

方式五：事件委托Event Delegation

利用事件冒泡，将事件绑定在父元素上，由父元素统一监听事件，在事件传播的路上恭候事件的到来。这样所有子元素都可以利用父元素的事件来触发js代码的执行，这就是事件委托（或称为事件代理）。相比于给每个元素单独绑定同样的事件类型，这么做的好处是：第一DOM查询量更少，因而事件就绪的时间就更块；第二内存消耗更小，因为事件处理程序更少。

3、表单

3.1 基本操作

3.2 文本框

3.3 选择框