第11章-对象模型和事件驱动.ppt

第11章对象模型和事件驱动在前面章节中已经介绍了JavaScript的所有语法和对象，这些语法和对象共同组成了JavaScript语言的核心部分，可以这么说，到上一章为止JavaScript就已经介绍完毕了。但仅仅了解了JavaScript语言的核心部分还远远不能满足动态网页的需要。要想设计出动态网页，还必须要了解BOM（BrowserObjectModel，浏览器对象模型）、HTMLDOM（DocumentObjectModel，文档对象模型）以及JavaScript的事件驱动。11.1对象模型通常，在一个语言中的对象都不会是独立的，对象与对象之间存在着层次结构，对象模型就是一种用于描述这种对象与对象之间的层次结构的模型。11.1.1常用的对象模型在前面章节中的JavaScript的数据类型、运算符、语句、函数、数组、对象、正则表达式，都属于JavaScript的核心（Core）部分。在这一部分中虽然也涉及到了对象，但还没有使用到对象模型。所谓对象模型，就是用于描述对象逻辑结构和标准操作方法的一个接口（API）。在JavaScript中使用最多的对象模型有BOM和DOM两种。11.1.2BOM简介在BOM中，对象与对象之间并不是独立存在的，对象与对象之间存在着层次关系。由于BOM是浏览器对象模型，所以在BOM中，顶层对象就是代表浏览器的Window对象，所有的其他对象都是Window对象下的子对象，图11-1为BOM的结构示意图。11.1.3DOM简介从BOM的结构示意图中可以看出，BOM为浏览器和文档都提供了接口，通过这些接口可以获得浏览器信息或处理文档。BOM并不是W3C中的标准，在W3C发布DOM之前，BOM就已经得到了众多浏览器的支持，但不同的浏览器所支持的BOM的对象有所不同。11.1.4BOM与DOM的区别很多初学者都分不清BOM和DOM有什么区别，从字面上理解，BOM是浏览器对象的模型，而DOM是文档对象的模型。在DOM中没有提供对浏览器对象处理的接口，所以在DOM中不能获取浏览器版本、显示器分辨率等信息，而使用BOM可以获取这些信息。11.2BOM中对象的引用从BOM对象模型中可以看出，BOM中的对象都不是独立存在的对象，对象与对象之间存在着层次关系，因此，在BOM中引用对象要遵循一定的引用规则。11.2.1基本引用规则BOM对象的基本引用方式是根据BOM结构示意图中的对象层次来引用。在顶层的Window对象可以直接使用“window”来引用，如以下代码所示：window.open() //打开一个浏览器窗口window.close() //关闭一个浏览器窗口11.2.2通过数组下标引用从BOM结构示意图中可以看到BOM中有很多数组，如Frames数组、Images数组、Forms数组等，这些数组中存放的都是相应的对象，如Frames数组中存放的是Frame对象、Images数组中存放的是Image对象、Forms数组中存放的是Form对象。因此，可以通过数组下标的方式来引用该对象。11.2.3通过名称引用在BOM中，允许使用标签的name属性值来引用对象。使用标签的name属性值引用对象的方法与使用数组下标引用对象的方法类似，必须要根据BOM结构示意图中的对象层次来引用。由于只有在代表文档的Document对象中才可能存在标签，所以在使用标签的name属性值来引用对象时，可以省略“document.”语句。11.3DOM中对象的引用BOM只能引用BOM结构示意图中所列举出来的对象，而DOM可以引用HTML文档中的任何一个标签，因此，DOM的引用范围更加广泛。11.3.1DOM的文档树在DOM中，将HTML中的所有内容看成是一棵树，HTML文档中的每一个标签、标签中的属性以及HTML中的文本都是树中的一个节点。11.3.2节点之间的关系DOM中的节点并不是独立存在的，节点与节点之间存在着联系，根据节点的层次不同，可以将节点与节点之间的关系分为以下几种：根节点（root）：位于DOM文档树顶层的节点，也就是html节点。子节点（children）：直接位于一个节点下的节点，如图11-3中，body节点和head节点都是html节点的子节点。父节点（parent）：直接位于一个节点上的节点，如图11-3中，html节点是body节点和head节点的父节点。兄弟节点（sibling）：也叫姊妹节点，有同一个父节点的节点为兄弟节点，如图11-3中，body节点和head节点为兄弟节点，但title节点和h1节点不为兄弟节点。子孙节点（descendant）：一个节点下的所有节点都是该