第12章走近DOM—构造导航列表

1、JS从入门到精通从入门到精通第第12章章 走近走近DOMDOM构造导航列表构造导航列表第第1212章章 走近走近DOMDOM构造导航列表构造导航列表 上一章讲述了如何使用上一章讲述了如何使用JavaScript控制页面的样式表现。控制页面的样式表现。页面的样式按使用方式来说分为内联样式、内嵌样式块和外部页面的样式按使用方式来说分为内联样式、内嵌样式块和外部样式表，样式表，JavaScript对其有着不同的操作方式。通过控制页面对其有着不同的操作方式。通过控制页面样式，可以实现很多有趣的效果。然而对样式的控制只能实现样式，可以实现很多有趣的效果。然而对样式的控制只能实现页面外在表现的变化，还不足

2、以满足某些复杂的设计需求，例页面外在表现的变化，还不足以满足某些复杂的设计需求，例如对页面内容、元素顺序等的控制。本章将讲述如对页面内容、元素顺序等的控制。本章将讲述HTML的文档的文档对象模型，提高对页面元素结构本质的理解，实现更加强大的对象模型，提高对页面元素结构本质的理解，实现更加强大的页面控制。页面控制。12.1 12.1 示例：可自定义的导航列表示例：可自定义的导航列表 代码代码12-1.htm是一个用户自定义设置界面，可实现是一个用户自定义设置界面，可实现导航列表的自定义，让用户可以自己选择需要显示的导导航列表的自定义，让用户可以自己选择需要显示的导航项目和顺序。由于代码很长，下面

3、分段解释，完整的航项目和顺序。由于代码很长，下面分段解释，完整的代码可以在本书的光盘中获取。代码可以在本书的光盘中获取。12.2 DOM12.2 DOM文档对象模型文档对象模型 文档对象模型文档对象模型DOM（“Document Object Model”）是用于）是用于HTML和和XML文档的应用程序接口（文档的应用程序接口（“API”）。）。DOM提供了结构化的文档表现形式，允许程序修改文档的提供了结构化的文档表现形式，允许程序修改文档的内容和视觉表现。本质上，其把网页和脚本或编程语言连内容和视觉表现。本质上，其把网页和脚本或编程语言连接了起来。接了起来。12.2.1 DOM12.2.1

4、DOM结构简述结构简述 在编写在编写HTML页面的时候，读者可能注意到页面的时候，读者可能注意到HTML文文档的源文件中，标记采用的是树状的结构。最顶层（或者档的源文件中，标记采用的是树状的结构。最顶层（或者说是最底层，取决于各人理解的方向，本书中的树均为说是最底层，取决于各人理解的方向，本书中的树均为“向下生长向下生长”的）是的）是“”标记，然后其中包含了标记，然后其中包含了“”和和“”等子标记，各个子标记的内部等子标记，各个子标记的内部又含有更深层的标记块。又含有更深层的标记块。DOM的结构与之相对应，也是树的结构与之相对应，也是树状的结构。状的结构。12.2.2 12.2.2 获取浏览器

5、信息获取浏览器信息“navigator”“navigator”对象对象 “navigator”对象和对象和“clientInformation”对象类似，对象类似，两者均提供对浏览器程序信息的访问检索。本小节只介绍两者均提供对浏览器程序信息的访问检索。本小节只介绍“navigator”对象，因为对象，因为“clientInformation”对象只有对象只有“Internet Explorer”浏览器支持，而浏览器支持，而“navigator”对象同对象同时被时被“Internet Explorer”、“FireFox”、“Opera”等浏等浏览器支持。览器支持。12.2.3 12.2.3 操

6、作剪贴板操作剪贴板“clipboardData“clipboardData” ”对象对象 “clipboardData”对象提供了脚本操作剪贴板的可能。对象提供了脚本操作剪贴板的可能。此对象没有属性，仅有三个方法：此对象没有属性，仅有三个方法：“clearData”、“getData”和和“setData”。 “clearData”用于清空剪贴板中的数据。其语法为：用于清空剪贴板中的数据。其语法为： clipboardData.clearData(sDataFormat)12.2.4 12.2.4 操作浏览器的历史记录操作浏览器的历史记录“history”“history”对象对象 “hist

7、ory”对象允许脚本控制浏览器在历史记录中前进对象允许脚本控制浏览器在历史记录中前进或后退。或后退。“history”对象只有一个属性：对象只有一个属性：“length”，此属性，此属性返回当前历史记录的长度，只读。返回当前历史记录的长度，只读。“history”对象的方法有对象的方法有：“back”、“forward”和和“go”。12.2.5 12.2.5 获取当前页面的获取当前页面的URLURL“location”“location”对象对象 和当前页面和当前页面URL相关的信息被保存在相关的信息被保存在“location”对对象的属性中，见下表象的属性中，见下表12-2。12.2.6

8、12.2.6 读取用户的屏幕分辨率读取用户的屏幕分辨率“screen”“screen”对象对象 “screen”对象包含了浏览者显示器的设置信息。此对象包含了浏览者显示器的设置信息。此对象没有方法，只有一些属性对象没有方法，只有一些属性12.3 12.3 使用使用DOMDOM的的“ “document”document”对象对象 上一节介绍的上一节介绍的“location”、“history”等等DOM对象对象的属性和方法非常有用，然而的属性和方法非常有用，然而“document”对象和其包对象和其包含的页面元素的属性和方法才是使含的页面元素的属性和方法才是使DOM如此重要的关键如此重要的关键

9、。12.3.1 “document”12.3.1 “document”对象特有的属性对象特有的属性 “document”对象是页面中一切对象是页面中一切HTML元素的根，具元素的根，具有很多一般元素节点所不具有的特殊属性和方法。表有很多一般元素节点所不具有的特殊属性和方法。表12-4是是“document”对象的属性列表。对象的属性列表。12.3.2 “document”12.3.2 “document”对象特有的方法对象特有的方法 document对象的方法中，前面介绍过对象的方法中，前面介绍过“attachEvent”、“detachEvent”和和“write”等方法。下面介绍一些其他的

10、常等方法。下面介绍一些其他的常用方法：用方法：“open”、“close”、“writeln”方法。这三个方法配合方法。这三个方法配合“write”方法，用来实现对页面中方法，用来实现对页面中HTML的输出，此三者均无的输出，此三者均无返回值。返回值。 “open”方法用来打开文档对象，其语法为：方法用来打开文档对象，其语法为： open(sUrl , sName , sFeatures , bReplace);12.3.3 12.3.3 执行打印、全选等命令执行打印、全选等命令“execCommand“execCommand” ”方法方法 “document”对象的对象的“execComma

11、nd”方法是一个非方法是一个非常常“有用有用”的方法。此方法实际上是提供了一个程序员控的方法。此方法实际上是提供了一个程序员控制浏览器行为的接口。其语法为：制浏览器行为的接口。其语法为： bSuccess = object.execCommand(sCommand , bUserInterface , vValue)。12.4 12.4 插入和删除元素插入和删除元素 在前面介绍在前面介绍“document”对象的时候，有一个方法对象的时候，有一个方法“createElement”，用来生成新的，用来生成新的HTML元素。此方法允许元素。此方法允许程序员在页面中动态的添加元素。其语法很简单，只有

12、一个程序员在页面中动态的添加元素。其语法很简单，只有一个必选的参数，字符串型，为需要生成的元素的标记名。生成必选的参数，字符串型，为需要生成的元素的标记名。生成的元素并不处于文档的树形结构中，犹如一个独立于页面的的元素并不处于文档的树形结构中，犹如一个独立于页面的，只存在于内存中的抽象的元素，需要程序员显式的将其加，只存在于内存中的抽象的元素，需要程序员显式的将其加入到文档入到文档DOM中。中。12.4.1 12.4.1 在容器元素的末尾插入元素在容器元素的末尾插入元素“appendChild“appendChild” ”方法方法 所有可以容纳子所有可以容纳子HTML元素，均具有元素，均具有D

13、OM方法方法“appendChild”。此方法的语法为：。此方法的语法为： container.appendChild(objSub); 参数参数“objSub”必选，为需要插入的子元素。此方法会必选，为需要插入的子元素。此方法会将将“objSub”元素插入到调用该方法的容器元素的最后。元素插入到调用该方法的容器元素的最后。12.4.2 12.4.2 在指定的元素前插入元素在指定的元素前插入元素“insertBefore“insertBefore” ”方法方法 如果不希望将子元素插入容器元素的最后，需要指如果不希望将子元素插入容器元素的最后，需要指定插入于其某一个子元素前，需要使用定插入于其某

14、一个子元素前，需要使用“insertBefore”方法，其语法为：方法，其语法为： container.insertBefore(objSub , oChildNode);12.4.3 “appendChild12.4.3 “appendChild” ”与与“ “insertBeforeinsertBefore” ”方法的方法的其他运用其他运用 “appendChild”与与“insertBefore”方法不仅可以用方法不仅可以用于在容器元素中插入新建的于在容器元素中插入新建的HTML元素对象，也可以用于元素对象，也可以用于将页面中已经存在的元素插入相应容器中。其效果相当于将页面中已经存在的元

15、素插入相应容器中。其效果相当于将原存在的元素移动到指定的位置，本章最初的代码将原存在的元素移动到指定的位置，本章最初的代码12-1.htm中，就利用此特点实现中，就利用此特点实现HTML元素在不同父节点之间元素在不同父节点之间的移动，和在同一个父节点中顺序的调整。的移动，和在同一个父节点中顺序的调整。12.4.4 12.4.4 删除节点删除节点“removeChild“removeChild” ”方法方法 仅仅能够动态的增加仅仅能够动态的增加HTML节点和调整节点的位置，还节点和调整节点的位置，还不足以满足页面程序设计的需要。有时需要动态的删除掉某不足以满足页面程序设计的需要。有时需要动态的删

16、除掉某些节点。些节点。DOM提供了相应的接口，即容器元素的提供了相应的接口，即容器元素的“removeChild”方法。其语法为：方法。其语法为： container.removeChild(objSub);12.5 12.5 小结小结 文档对象模型（文档对象模型（“DOM”）是）是HTML页面与页面与JavaScript交互的基础，体现了页面的逻辑结构。其提交互的基础，体现了页面的逻辑结构。其提供了对浏览器本身及页面元素强大的控制能力。供了对浏览器本身及页面元素强大的控制能力。12.6 12.6 常见面试题分析常见面试题分析 12.6.1 什么是什么是DOM? 文档对象模型文档对象模型DOM

17、（“Document Object Model”）是用于是用于HTML和和XML文档的应用程序接口（文档的应用程序接口（“API”）。）。DOM提供了结构化的文档表现形式，允许程序修改文档的内容和提供了结构化的文档表现形式，允许程序修改文档的内容和视觉表现。视觉表现。12.6.2 12.6.2 简单描述下简单描述下DOMDOM结构中的元素结构中的元素 DOM模型的最顶层对象是模型的最顶层对象是“窗口窗口”（“window”）。对于）。对于窗口中的脚本，默认引用的是当前窗口的窗口中的脚本，默认引用的是当前窗口的“window”对象。对象。 窗口对象的子对象有窗口对象的子对象有“clientInformation”、“clipboardData”、“document”、“event”、“external”、“his