- 1. 第4章 DOM文档对象模型介绍DOM是Document Object Module的缩写，即文档对象模型。DOM是表示文档，访问和操作文档元素的应用程序接口（API），所有支持JavaScript的web浏览器都支持DOM。本书中介绍的DOM实际上是指W3C DOM，即由World Wide Web委员会定义的标准文档对象模型，其包含了传统web浏览器所实现的DOM模型的所有特性。DOM支持对HTML及XML的操作。
- 2. 4.1 基本概念本节向读者介绍DOM的基本概念，包括DOM的体系结构（树形结构）、节点及其组成部分、节点的类型以及节点之间的关系。
- 3. 4.1.1 树形结构在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的Document对象，树的每个子节点表示HTML文档中的不同内容。
- 4. 4.1.2 节点的类型和组成每个节点都由一个Node对象表示，Node对象提供了nodeType属性来表示节点的类型。DOM为不同类型的节点提供了相应的接口，当知道一个节点为某种类型时，则可以使用相应的接口所定义的属性和方法。
- 5. 4.1.3 节点之间的关系节点与节点之间通常有3种关系：父子关系、兄弟关系和祖孙关系。在图4.1中，节点是节点和节点的父节点，和节点是节点的子节点，而和互为兄弟关系。同样，节点是
和
节点的父节点，
和
节点是
节点的子节点，和
节点互为兄弟节点。一个节点的父节点以上级别的节点，称为这个节点的祖先节点，这个节点称为祖先节点的子孙节点。例如节点是
节点的祖先节点，
节点是节点的子孙节点。DOM为Node对象提供了一组属性来表达这些关系，使得程序可以非常方便的获得对节点的引用。关于这些属性的知识将在下一节中向读者介绍。
- 6. 4.2 节点的引用需要对一个节点做相应操作时，首先需要获得对这个节点的引用。DOM定义了大量的属性和方法可以使程序方便的获得对目标节点的引用。下面向读者一一介绍。
- 7. 4.2.1 根据id属性引用节点在HTML中，可以给节点添加一个id属性，从而通过document对象的getElementById方法来查找拥有指定id属性值的节点。
- 8. 4.2.2 根据name属性引用节点通过docment对象的getElementsByName方法可以取得文档中所有具有指定name属性的节点的集合，该方法返回的是一个数组。
- 9. 4.2.3 根据标签名引用节点Node对象提供了getElementsByTagName方法来查找所有标签名与给定参数一致的下属节点，该方法返回一个数组。在介绍document对象的links属性时，已经向读者介绍过一个改变文档中所有链接背景色的示例。
- 10. 4.2.4 引用父节点Node对象提供了parentNode属性来引用当前节点的父节点。在下面的示例中，程序给页面所有的li时间注册了click事件的处理程序，单击li元素，则在指定的div中显示父节点的id。
- 11. 4.2.5 引用子节点Node对象提供了3个属性来引用其直属子节点，分别是childNodes、firstChild和lastChild。childNodes属性来引用其所有的直属子节点。firstChild属性等于childNodes返回的元素集合中的第一个元素。lastChild属性等于childNodes返回的元素集合中的最后一个元素。在下面的示例中，首先获取文档中的ul元素，然后通过firstChild、lastChild和childNodes属性给第一个li节点和最后一个li节点以及剩下的其他节点设置3种不同的背景色。
- 12. 4.2.6 引用相邻的节点Node对象的previousSibling和nextSibling属性保存了节点的上一个和下一个兄弟节点的引用。在下面的示例中，通过给li节点定义事件处理程序，使得当鼠标划过li节点时，li节点本身的背景色变为红色，其相邻两个li节点的背景色变为黄色，当鼠标划离li元素时，回复原样。
- 13. 4.3 节点的操作上一节向读者介绍了各种获得节点引用的方法，这一节向读者介绍针对节点的基本操作。DOM提供了丰富的方法来支持对节点的基本操作：即创建、添加、修改和删除节点。本节将会辅以实例向读者详细介绍。
- 14. 4.3.1 创建元素节点当需要创建一个元素节点时，可以使用document对象的createElement方法。该方法接受一个标识需要创建的元素的标签名的字符串参数，返回对被创建的节点的引用。
- 15. 4.3.2 创建文本节点使用createTextNode方法可以创建一个文本节点，该方法接受一个字符串作为创建的文本节点的文本值。示例代码如下。
document.createTextNode(‘It is a text node’);
- 16. 4.3.3 添加节点Node对象提供了appendChild方法来将程序创建的节点，添加到父节点的直属子节点列表的末尾。该方法也可作用于已经存在于DOM树中的节点，执行方法后会改变节点在DOM树中的位置，而不是插入一个新的节点。
- 17. 4.3.4 插入子节点Node对象提供了insertBefore方法来将新节点插入到指定子节点的前面，其语法格式如下所示。
parentNode.insertBefore(newNode,childNode);
- 18. 4.3.5 替换子节点Node对象提供了replaceChild方法来使用一个新的节点替换一个子节点，其语法格式如下所示。
parentNode.replaceChild(newNode,childNode);
- 19. 4.3.6 复制节点Node对象提供了cloneNode方法来得到Node对象的一个副本。cloneNode方法接受一个布尔值参数，来标识返回的节点副本中是否包含原节点的子节点。当参数为true时，则包含子节点；当参数为false时，则不包含子节点。
- 20. 4.3.7 删除子节点Node对象提供了removeChild方法来删除一个直属子节点，该方法接受一个参数，为需要参数的子节点的引用。基本语法如下所示。
parentNode.removeChild(childNode);
- 21. 4.3.8 读取节点属性使用Node对象的getAttribute方法可以得到节点的某一属性的值，该方法接受一个属性名作为参数，返回指定属性的值。例如有一a元素。
Robin Chen
- 22. 4.3.9 添加和修改属性节点当需要添加或者修改一个属性节点时，可以使用Node对象的setAttribute方法。W3C并没有为这两部操作提供两部不同的方法，而是将这两项功能集中到了setAttribute这一个方法上。setAttribute方法的基本语法格式如下所示。
node.setAttribute(attName,attValue);
- 23. 4.3.10 删除属性节点当需要删除一个节点的某个属性时，可以使用removeAttribute方法。removeAttribute方法接受一个参数，表明了需要删除的属性的名称。其基本语法格式如下所示。
node.removeAttribute(attName);
- 24. 4.4 控制元素的样式上一节向读者介绍了常见的针对节点的基本操作。DOM也提供了接口来支持针对元素节点CSS样式的操作。通过设置元素的class属性和操作元素的style属性，可以达到控制元素CSS样式的目的。本节将向读者介绍相关的知识。
- 25. 4.4.1 获取和设置元素的CSS类通过设置元素的class属性，可以为元素指定一个css类来设置元素的样式。
- 26. 4.4.2 获取和设置元素样式DOM为Node对象定义了style属性，以此作为对CSS样式操作的接口。元素的style属性是一个对象，保存了元素的CSS样式信息。例如node.style.backgroundColor保存了背景色的信息，node.style.color保存了文字颜色的信息。
- 27. 4.5 事件处理事件处理是DOM中最重要的组成部分。事件驱动是现代面向对象编程的基本方法，完善的事件机制使JavaScript程序可以根据特定的事件来触发不同执行方法，使得程序可以更具有交互性和智能化。在本书之前的许多示例中，读者已经见过事件的使用。本节将向读者详细介绍DOM的事件模型。
- 28. 4.5.1 事件模型和传播机制目前主流浏览器所使用的事件模型主要为标准事件模型和IE事件模型。IE事件模型由IE浏览器使用，而标准事件模型由W3C制订，由Netscape等浏览器实现。
- 29. 4.5.2 注册事件处理程序注册一个事件处理程序有三种方法。第一种方法是作为节点的属性直接将时间处理程序写在属性值中。在之前的很多示例中，读者已经见过了这种方法。
Document.getaelementById(‘btnclck’).onclick=function()
{setSize(11);
}
- 30. 4.5.3 注销事件处理程序当不再需要一个事件处理程序时，可以将其注销。使用节点属性或者对象属性注册的事件处理程序，可以通过将对象的相应属性设置为null来注销该事件处理程序。使用attachEvent或addEventListener注册的事件处理程序，可以使用对应的detachEvent或removeEventListener来注销。
- 31. 4.5.4 事件对象在前面介绍事件模型时，已经向读者简单介绍过事件对象的作用，就是在事件发生时生成事件对象，保存到window对象的event属性中（IE事件模型），或者当作第一个参数传递给事件处理程序（标准事件模型）。事件对象保存了事件的相关信息，例如事件的类型、发生事件的目标元素等等。
见136页 表4-2
- 32. 4.5.5 常用事件在学习了事件处理函数的注册和注销，已经事件对象的使用后，读者一定很想知道有哪些事件可以使用。
见139页表4-3
- 33. 4.6 应用实例本节综合本章中向读者介绍的有关DOM的知识，来编写两个常见的JavaScript应用。一个是悬浮的广告，另外一个是可拖动的层。建议读者自己将代码输入到编辑器中，并保存为HTML页面，然后到浏览器中查看效果，以加深记忆和理解。对于示例中出现的一些本章中未说明的内容，可以查阅本书附录中的DOM速查手册来了解其用法。
- 34. 4.6.1 悬浮的广告读者朋友们在很多网站上都可以看见这样的广告：广告的图片或文字始终停留在页面的某个位置，如论如何拖动滚动条，广告都会跟随屏幕的滚动而滚动。下面是一个实现该效果的实例，读者可以将代码保存成页面，并用浏览器访问来查看其效果。
- 35. 4.6.2 可拖动的层用过Google个性化首页或者QQ空间装扮功能的读者，一定会对其能够自由拖动各个内容层的操作印象深刻，下面的实例就是简单实现层的拖拽这一功能。
- 36. 4.7 小结本章向读者介绍了DOM（文档对象模型）的相关知识。首先介绍了DOM的层次结构，是一个以document对象为根节点的树形结构，DOM节点的类型和组成，以及节点之间的关系。然后向读者介绍了引用节点的各种方法，有直接通过id、name或标签名引用的方法，也有通过节点之间的关系引用的间接引用方法。接着向读者介绍了针对节点的各种操作，包括创建节点、添加节点、删除节点、替换节点和对属性的操作。之后向读者介绍了如何通过DOM定义的接口来控制节点的样式，包括控制节点的class属性和操作style对象。接着向读者介绍了DOM的事件模型，其中包括标准事件模型和IE事件模型，讲解了如何注册和注销事件处理程序，分析了事件对象并罗列了常用的事件。最后，向读者展示了两个常见的应用实例：浮动广告和拖动层。
