15 精通DOM文档对象模型 JavaScript是一种基于对象的脚本语言，而不是面向对象的编程语言。早期的JavaScript根据浏览器和网页文档包含的内容定义了一些对象，如文档（Document）、图像（Image）、表单（Form）等，对于这些还不成系统的对象，我们习惯称之为0级DOM。后来JavaScript又根据W3C制订的DOM文档规范，把所有网页内容都视为对象，调用这些对象就可以动态控制它们的显示，我们称之为1级或2级DOM。随着客户端开发的流行，DOM（文档对象模型）也逐渐成为客户端Web编程的基础，本章将以标准DOM（1级和2级）为基础讲解如何借助DOM来控制网页内容的动态呈现。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM DOM是Document Object Model（文档对象模型）的简写，它表示访问和操作文档（如HTML、XML文档）的API（应用程序接口），通俗说DOM就是一套文档抽象化的标准规范和操作方法。因此DOM是建立在HTML和XML文档基础之上，当把网页被加载到浏览器中时，浏览器会调用DOM API组件根据一定的规范解析文档结构，创建网页结构的文档对象索引模型，为JavaScript脚本访问文档内容提供接口和操作支持。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 15.1.1 浏览器对象模型实际上JavaScript脚本中所包含的对象可以分为三种类型：
浏览器对象模型实际上JavaScript脚本中所包含的对象可以分为三种类型：用户对象：由用户在脚本中根据JavaScript语法规则自定义的对象。内置对象：预定义并被内置到JavaScript语言内的对象，如Object、Array、Function、Date、Math、String、Number和RegExp等。宿主对象：捆绑到浏览器内的API组件定义的对象。这些对象与JavaScript语言没有直接关联，但是我们可以在JavaScript脚本中访问并操作它们，如Window、Document、Navigator、Screen、Location、History、Form等。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 浏览器对象模型 Window对象代表浏览器窗口本身，该对象包含的属性和方法被统称为BOM（浏览器对象模型），或者通俗说就是窗口对象模型。利用该模型中的对象属性和方法可以控制浏览器窗口及其内部包含对象的显示属性和呈现效果。Window对象是浏览器对象模型的基础，它又包含众多分支对象，所有这些浏览器对象便构成了一个0级DOM的结构图（参见下一页）。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 浏览器对象模型《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 15.1.1 浏览器对象模型《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）
浏览器对象模型 BOM对象说明 Window JavaScript层级中的顶层对象。每当<body>或<frameset>标签出现时，Window 对象就会被自动创建 Navigator 包含客户端浏览器的信息 Screen 包含客户端显示屏的信息 History 包含浏览器窗口访问过的URL Location 包含当前URL的信息 Document 包含整个HTML文档，可被用来访问页面中的所有元素《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 浏览器对象模型补充： DOM被分为3个级别（或者所版本）：0级、1级和2级。其中0级是传统的文档对象模型，而1级和2级是W3C组织推出的完全标准的文档结构模型。其中1级DOM于1998年10月推出，它定义了DOM的核心接口（即核心功能），如Node（节点）、Element（元素）、Attr（属性）和Document（文档），还定义了HTML专有的接口。2000年11月W3C又推出了2级DOM，在2级DOM中除了升级1级DOM 核心接口外，还扩展了文档事件和CSS样式表的标准API。0级DOM不代表任何正规标准，只用于引用W3C标准化之前的Netscape和IE浏览器实现HTML文档对象模型的通用特性或方法。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 标准文档对象模型 DOM中的M表示Model（模型），或者你也可以把它理解为Map（地图）。不管是模型还是地图，它们仅是特定事物的表现形式。当网页被加载到浏览器窗口中后，浏览器就会自动提供了当前网页的地图（即模型），然后我们就可以借助JavaScript去读写这张地图。既然是地图，其中就必须包含方位、比例尺、色块、地标等之类的记号。要想看懂和使用地图，就必须知道这些记号的含义和用途。同样的道理，如果要想从DOM中获取信息，当然也应该明白DOM所描述网页文档的规则。（DOM三个字母含义解释参阅15-1.html）标准文档对象模型（1级和2级DOM）没有沿用传统文档对象模型（0级DOM）的设计模式对文档进行概括。它把网页文档看做一棵树（数学概念），一棵树就代表一个网页文档，因此有人形象的把标准DOM比作树形结构模型，树形结构比较形象的概括了DOM的结构基础。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 15.1.2 标准文档对象模型 15-1.html文档的树形结构《网页制作与网站开发从入门到精通》配套视频
标准文档对象模型 15-1.html文档的树形结构《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 标准文档对象模型树形结构遵循人类家族的谱系进行标记，表示对象成员之间的关系。例如，使用parent（父）表示上一级元素，child（子）表示下一级元素，sibling（兄弟）表示同级相邻元素等。借助这种关系能够把一个复杂的文档结构简单化，具体说就是对于某个特定的家族成员，它可能是某些成员的父辈，也可能是某位成员的子辈，同时还是某些成员的兄弟。在文档Doctype声明之后，首先是html元素（即<html>标签），网页里所有其他元素都包含在这个元素里。从文档结构看，html元素既没有父辈，也没有兄弟。如果用树来表示的话，这个html元素就是树根，也就是说它代表整个文档。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 标准文档对象模型由html元素派生出head和body两个子元素，它们属于同一层次且互不包含，可以称之为兄弟关系。head和body元素拥有共同的父元素html，同时它们又是其他元素的父元素，但包含的子元素完全不同。head元素包含title元素（即<title>标签），title元素又包含文本对象“标准DOM示例”。Body元素包含3个子元素：h1、p和ul，它们是兄弟关系。如果继续深入分析，你会发现ul元素（即<ul>标签）也是一个父元素，它包含3个li子元素。使用这种树形结构可以很直观的把文档结构中各个元素之间的关系简明直观的表达出来。如果把各种文档元素想像成一棵树上的各个节点的话，我们就可以用同样的记号来描述DOM。不过与使用家谱术语相比，使用节点来描述网页文档中不同元素和元素包含的文本会更加准确。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM DOM中的节点节点（node）实际上源于网络，它代表着网络中的一个连接点，整个网络就是由无数个节点构成的集合。 DOM与网络结构拥有类似的结构。整个文档就是由很多节点构成的集合，只不过这里的节点是文档树上的枝和叶，通俗说就是文档中的元素以及元素包含的文本信息。这些节点可以拥有不同的节点类型，文档树中每个节点对象都有nodeType属性，该属性指定节点的类型，《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 15.1.3 DOM中的节点《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）
节点类型返回值 nodeName nodeValue 说明 Document 9 #document null 表示整个文档（DOM树的根节点） DocumentFragment 11 #document fragment 表示轻量级的Document 对象，其中容纳了一部分文档 DocumentType 10 doctype名称向为文档定义的实体提供接口 ProcessingInstruction 7 target 节点内容表示处理指令 EntityReference 5 实体引用名称表示实体引用元素 Element 1 元素名称表示元素 Attr 2 属性名称属性值表示属性 Text 3 #text 表示元素或属性中的文本内容 CDATASection 4 #cdata-section 表示文档中的CDATA区段（文本不会被解析器解析） Comment 8 #comment 注释文本表示注释。 Entity 6 实体名称表示实体 Notation 12 符号名称表示在DTD中声明的符号《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.1 认识DOM 15.1.3 DOM中的节点元素节点（element node）
元素节点构成了DOM的基础。在文档结构中，我们使用的<html>、<head>、<body>、<h1>、<p>和<ul>等标签都是元素节点。各种标签提供了元素的名称，文本段落元素的名称是“p”，无序列表元素的名称是“u1”，标题元素的名称是“h”等。文本节点（text node）元素只是节点树中的一种类型。如果文档完全由元素组成，则这份文档本身将不会包含任何信息，因此文档结构也就失去了存在的价值。属性节点（attribute node）元素一般都会包含一些属性，属性的作用是对元素做出更具体的描述。例如，一般元素都有title属性，该属性能够对元素进行详细的描述或说明，以便用户清楚该元素的用途、作用或功能。 <img src="images/1.gif" title="个人相册" /> 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.2 文档基本操作 W3C在推出DOM 2版本（即2级DOM）之后，全部对DOM标准进行模块化设计和封装。其中核心模块包括Document（文档）、Node（节点）、Element（元素）和Text（文本），这4个核心接口（或称对象）定义了文档的基本树形结构，它们也是文档惟一必须的模块。其他的模块都是可选的，可能被支持，也可能不被支持。下面我们就来讲解如何操作这些基本节点。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.2 文档基本操作遍历文档为了方便用户遍历文档，获取对节点的控制权，DOM提供多个属性，这些属性能够根据节点树的结构特点可以准确进行定位。 childNodes 该属性能够获取指定元素的所有子节点，具体返回值为一个数组。即使某个元素只有一个子节点，childNodes属性也将返回一个节点数组而不是返回一个单个的节点。在这个nodeList集合中每一个数组元素都是一个节点对象，这些节点对象都有nodeType、nodeName、nodeValue等常见节点属性。例如，下面示例展示了如何获取指定元素的子节点对象。 15-3.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.2 文档基本操作遍历文档文本节点和属性节点都不包含任何子节点，所以它们的childNodes属性永远返回一个空数组。如果想判断某个元素是否包含有子节点，可以使用haschildNodes()方法进行快速判断。如果想知道指定元素包含的子节点数，可以使用childNodes数组的length属性快速获取。 node.childodes.length childNodes属性是一个只读属性。如果需要给某个元素增加子节点，可以使用appendChild()或insertBefore()方法，如果需要删除某个元素的子节点，可以使用removeChild()方法《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.2 文档基本操作 15.2.1 遍历文档 firstChild和lastChild
15.2 文档基本操作遍历文档 firstChild和lastChild firstChild属性可以返回指定元素的第一个子节点。lastChild属性可以返回指定元素的最后一个子节点。它们将返回一个节点对象的引用指针，因此将自动拥有nodeType、nodeName和nodeValue属性。文本节点和属性节点的firstChild和lastChild属性总是返回为空。firstChild和lastChild属性也是只读属性。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.2 文档基本操作 15.2.1 遍历文档 parentNode
15.2 文档基本操作遍历文档 parentNode parentNode属性将返回指定节点的父节点。该属性将返回一个节点对象的引用指针，因此它也拥有nodeType、nodeName和nodeValue等常见节点属性。 parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才可能包含子节点。不过document节点没有父节点，document节点的parentNode属性将返回null。parentNode属性是一个只读属性。 nextSibling和previousSibling nextSibling属性能够返回一个指定节点的下一个相邻节点。previousSibling属性能够返回一个指定节点的上一个相邻节点。它们返回一个节点对象的引用指针，因此也都拥有nodeType、nodeName、nodeValue等常见节点属性。nextSibling和previousSibling都是只读属性。如果指定节点的相邻节点中没有同属一个父节点的节点，则它们将返回null。 15-4.html、 15-5.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.2 文档基本操作增加文档内容为了方便用户操作文档，微软在IE 4.0版本开始为所有元素引入4个基本属性：innerText、outerText、innerHTML和outerHTML。这些属性虽然在新标准中不再建议使用，但是它们使用比较灵活，因此也很受设计师的欢迎。这四种属性的简单说明如下： innerHTML：在指定元素中插入包含HTML标签的文本内容。HTML结构被插入到文档中依然有效。 innerText：在指定元素中插入文本内容。文本中包含的HTML标签被编码显示，所插入的HTML标签仅作为字符串来显示。 outerHTML：与innerHTML方法功能类似，但是它能够覆盖原来指定的元素。 outerText：与innerText方法功能类似，但是它能够覆盖原来指定的元素。 15-6.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作节点（node）是DOM的最小操作单元，也是文档结构构成基础，它犹如生命体中的细胞。如何操作这些细胞，是初学者必须熟练掌握的基本功。本节将分类讲解文档结构模型中这些节点的基本操作方法和技巧。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作获取节点操作文档结构的第一步是需要获取节点的引用指针，以实现对其进行控制，因此也可以称其为控制句柄。为了控制节点，DOM提供了两个方法：方法一，使用getElementById()方法可以精确获取指定节点的引用指针。具体用法如下： o = document.getElementById(ID) 其中o表示指定节点的引用指针，参数ID表示文档结构中对应节点的id属性值。如果文档中不存在指定节点，则返回值为null。该方法只适用于document对象（元素）。例如，下面脚本能够获取对<div id="box">对象的控制权。 <div id="box">盒子</div> <script language="javascript" type="text/javascript"> var box = document.getElementById("box"); // 获取id属性值为box的指定节点引用指针 </script> 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作获取节点 getElementById()方法返回指定元素的对象，这个对象包含nodeName、nodeType、parentNode和childNodes等属性。这4个属性比较常用，详细说明如下： nodeName表示节点的名称。如果是元素节点，则nodeName返回值为标签名称，标签名称永远是大写；如果是属性节点，则nodeName返回值为属性的名称；如果是文本节点，则nodeName返回值永远是#text标识符；如果是文档节点，则nodeName返回值永远是#document标识符。 nodeType表示节点的类型。该属性的返回值比较多，比较重要的节点类型包括：1表示元素类型，2表示属性，3表示文本，8表示注释，9表示文档。 parentNode属性可以返回父级节点引用指针。利用该属性可以获得当前节点的父级节点控制句柄。 childNodes属性表示当前元素包含的所有子元素，因此该属性返回的是一个数组，其中包含所有子元素的序列。要获取其中某个子元素，可以使用数组下标进行快速、准确定位。 15-7.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作获取节点方法二，使用getElementByTagName()方法获取指定标签名称的所有元素对象。其用法如下： a = document.getElementsByTagName(tagName) 其中参数tagName表示指定名称的标签，该方法返回值为一个节点集合，我们可以把它作为一个数组来进行处理。使用length属性可以获取集合中包含元素的个数，利用数组下标可以确定其中某个元素对象。对于这些数组元素来说，由于它们都是节点对象，因此我们可以使用nodeName、nodeType、parentNode和childNodes属性查看该对象的节点类型、节点名称、父节点和第一个子节点的名称。 15-8.html、 15-9.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作创建节点 createElement()方法能够根据参数中指定的名称创建一个新的元素节点，并返回新建元素节点的引用指针（或称控制句柄）。 var e = document.createElement("element"); 其中e表示一个变量，用来存储新建元素的引用指针地址，createElement()是Document对象的一个方法，所以应该指定该对象。该方法只有一个参数，即将被创建的元素的名字。 var p = document.createElement("p"); 15-10.html、 html、15-12.html、15-13.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作复制节点 DOM提供了cloneNode()方法来复制一个节点。也就是所cloneNode()方法能够给节点创建一个副本。其用法如下： var o = node.cloneNode(deep); 其中o表示一个复制节点的引用指针，node表示一个已经存在的节点对象，而deep参数表示一个逻辑值。取值为true，则复制的节点将包含所有子节点内容，取值为false，则复制的节点仅包含指定对象本身，不包含任何子节点。如果被复制的节点是一个元素节点，其所包含的所有文本将不会被复制，因为这些文本是一个子节点，但是属性节点将被复制。 clodeNode()方法所返回的引用指针指向一个节点对象。新节点有着与被复制节点完全一样的nodeType和nodeName属性值。 15-14.html、15-15.html、15-16.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作插入节点方法一，使用appendChild()方法。appendChild()方法能够把新创建的节点插入到某个指定的元素下。语法如下： var o = e.appendChild(new_e); 在这里appendChild()把new_e节点对象增加到e所指定的节点下面，并返回一个指向新增节点的引用指针。该方法常与createElement()和createTextNode()方法配合使用。新建节点可以被追加到文档中任何一个元素中。 15-17.html、15-18.html、15-19.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作插入节点方法二，使用insertBefore()方法可以把一个指定的节点插入到给定元素中。不过它与appendChild()方法略有不同，insertBefore()方法所插入的节点位于指定元素的指定子节点的前面，而不是完全被放置在最后面。语法如下： var o = e.insertBefore(new_e, target_node); 在这里insertBefore ()方法把new_e节点对象增加到e所指定的节点下面，并返回一个指向新增节点的引用指针。参数target_node表示元素e包含的一个子节点。如果指定了target_node参数，则表示在target_node子节点前面增加一个指定子节点对象；如果未指定target_node参数，则插入的子节点被放置在子元素中最后位置，此时它的作用效果等同于appendChild()方法。 insertBefore ()方法如果与createElement()和createTextNode()方法配合使用，可以把指定元素精确插入到文档结构中某个指定位置。 15-20.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作 15.3.5 删除节点 DOM提供了removeChild()方法可以在文档中删除节点。用法如下：
15.3 节点基本操作删除节点 DOM提供了removeChild()方法可以在文档中删除节点。用法如下： o = e.removeChild(node) 其中o表示removeChild()方法的返回值，e表示被删除节点的父元素，而node表示将要被删除的节点内容。当使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除。 15-21.html、15-22.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.3 节点基本操作 15.3.6 替换节点替换节点可以使用DOM提供的replaceChild()方法来实现。其用法如下：
15.3 节点基本操作替换节点替换节点可以使用DOM提供的replaceChild()方法来实现。其用法如下： o = e.replaceChild(newNode, oldNode) 该方法能够把一个给定的父元素所包含的一个子节点替换为另外一个节点。其中o表示替换之前的子节点所引用指针，而参数e表示父元素，newNode参数表示替换后的节点，而oldNode表示替换前的节点。 15-23.html、15-24.html、15-25.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.4 属性基本操作元素是文档结构模型中一类比较实用的节点类型，由于所有信息都包含在元素节点内，同时属性节点又都包含在元素的头部标签内。如何精确设置和获取元素的属性也是我们经常面临的问题，本节将详细讲解元素属性的基本操作方法。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.4 属性基本操作获取节点属性 DOM提供了getAttribute()方法可以获取指定元素的属性。其用法比较简单，只要指定元素以及它的属性，即可快速反馈该元素所对应的属性值。 15-26.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.4 属性基本操作设置节点属性为元素设置属性可以使用setAttribute()方法实现，该方法与getAttribute()是一对相反操作的DOM方法。其用法如下： e.setAttribute(name,value) 其中参数e表示指定的元素对象，name和value参数分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新，；如果不存在，则setAttribute()方法将为元素创建该属性并赋值。 15-27.html、15-28.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

15.4 属性基本操作删除节点属性既然能够设置元素的属性，当然也可以进行删除。DOM提供了removeAttribute()方法可以删除指定的属性。其用法如下： e.removeAttribute(name) 其中e表示一个元素对象，而参数name表示元素的属性名。 15-29.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（

Similar presentations

Similar presentations

About project

反馈

请登录

Auth with social network:

Similar presentations

Similar presentations

About project

反馈