JavaScriptnDOM基础.ppt
《JavaScriptnDOM基础.ppt》由会员分享,可在线阅读,更多相关《JavaScriptnDOM基础.ppt(81页珍藏版)》请在三一办公上搜索。
1、第7章DOM基础,DOM(Document Object Model,文档对象模型)是由W3C制定的标准,它为应用程序访问和操作XML和HTML文档提供了一套标准的API。DOM可以分为3个部分:核心DOM接口以及针对XML和HTML的DOM标准接口。JavaScript编程中使用的是HTML DOM,当然它是在核心DOM的基础上扩展而来的。,本章将首先介绍DOM标准相关的基础知识,然后介绍如何在JavaScript中使用DOM进行节点的访问和操作,最后通过一系列应用示例说明DOM在Web编程中的应用。,7.1 DOM标准,DOM是由W3C制定的标准,目前有3个不同的版本,分别称之为DOM L
2、evel 13,但浏览器厂商并没有完全按照DOM标准来实现浏览器。目前与DOM标准兼容最好的浏览器是Mozilla Filefox,它实现了绝大部分的DOM Level 2特性和少量DOM Level 3特性,而Internet Explorer在这方面落在最后,它对DOM Level 1的实现都还不完整,尚有很多方面有待完善。,7.1.1 什么是DOM,【例7-1】ex1.html,图7-1 Internet Explorer中的DOM树结构,图7-2 Mozilla Firefox中的DOM树结构,7.1.2 DOM标准接口,表7-1DOM标准特性,3.0,2.0,1DOM核心接口,表7-
3、2DOM节点类型,图7-3 DOM Level 1核心接口,2DOM HTML接口,图7-4 DOM Level 1 HTML接口,7.1.3 DOM标准的使用,以上对DOM标准的核心对象作了简要介绍,那么在实际应用中如何判断我们使用的方法是DOM标准所定义的呢?最直接的方法是查阅DOM的标准规范,在下面的网址可以找到DOM Level 13的所有文档:,7.2 使用DOM,DOM在HTML页面中的应用包括以下几类:(1)访问指定节点;(2)访问相关节点;(3)访问节点属性;(4)检查节点类型;(5)创建节点;(6)操作节点。,7.2.1 访问指定节点,“访问指定节点”的含义是已知节点的某个属
4、性(如id属性、name属性或者节点类型),在DOM树中寻找符合条件的节点。相关的方法包括getElementById(),getElementsByName()和getElementsByTagName。,1getElementById方法,应用getElementById方法可以根据传入的id参数返回指定的元素节点。在HTML文档中,元素的id属性是该元素对象的唯一标识,因此getElementById方法是最快的节点访问方法。例如例7-2所示的HTML页面。,【例7-2】ex2.html(HTML部分)【例7-3】ex2.html(完整),2getElementsByName方法,get
5、ElementsByName方法将查找所有元素对象,返回name属性为指定值的元素对象列表。例如例7-4所示的HTML页面。【例7-4】ex3.html(HTML部分),3getElementsByTagName方法,getElementsByTagName方法将返回指定类型的元素集合,与前面介绍的getElementById和getElementsByName方法不同,getElementsByTagName不仅可以用于Document对象,而且可以用于普通的Element对象。考虑例7-5所示的HTML页面。,【例7-5】ex4.html(HTML部分)【例7-6】ex4.html(Jav
6、aScript部分),7.2.2 访问元素属性,Node接口中已经具有attributes方法,且已被所有类型的节点继承,但是只有Element节点才能拥有属性。Element节点的attributes属性是NamedNodeMap类型的,它提供了一些用于访问和处理其内容的方法:,(1)getNamedItem(name):返回nodeName属性值为name的节点;(2)removeNamedItem(name):删除nodeName属性值为name的节点;(3)setNamedItem(node):将node添加到列表,按其nodeName属性进行索引;(4)item(pos):返回pos
7、位置处的节点。,但是这些方法使用时有些累赘,DOM又定义了3个元素方法来帮助访问属性:(1)getAttribute(name):相当于attributes.getNamedItem(name).value;(2)setAttribute(name,value):相当于attributes.getNamedItem(name).value=value;(3)removeAttribute(name):相当于attributes.removeNamedItem(name)。考虑在例7-7所示的HTML页面中访问元素的属性。【例7-7】ex5.html,7.2.3 访问相关节点,“访问相关节点”的
8、含义是根据已知的节点,寻找和它存在联系的节点,如父节点、子节点、兄弟节点等。下面介绍在DOM中访问相关节点的方法。,1documentElement属性,通过documentElement属性可以很方便地访问到HTML文档的根节点,即元素。【例7-8】ex6.html,2ownerDocument属性,ownerDocument属性也是在Node接口中定义的,该属性返回了DOM节点所在的文档对象。【例7-9】ex7.html,3访问子节点,Node接口定义了以下的属性,可以用于访问DOM节点的子节点:(1)childNodes:子节点的列表;(2)firstChild:第一个子节点;(3)la
9、stChild:最后一个子节点。,4访问父节点,Node接口定义了parentNode属性,可以用于访问DOM节点的父节点,,5访问兄弟节点,Node接口还定义了以下的属性,用于访问DOM节点的兄弟节点:(1)previousSibling:上一个兄弟节点;(2)nextSibling:下一个兄弟节点。,7.2.4 检查节点类型,在DOM中可以使用节点的nodeType和nodeName属性检查节点的类型,表7-3所示为各类DOM节点的nodeType和nodeName属性值。,表7-3DOM节点的nodeType和nodeName,【例7-10】ex8.html,图7-6 例7-10输出结果
10、图,7.2.5 创建节点,DOM标准中用于创建节点的方法包括:(1)createElement方法:创建HTML元素;(2)createTextNode:创建文本节点;(3)createDocumentFragment方法:创建DOM文档片段;(4)cloneNode方法:通过复制已有节点创建新节点。,1createElement方法,createElement方法用于在HTML文档中创建新的元素。考虑例7-11所示的HTML页面。【例7-11】ex9.html(HTML部分)【例7-12】ex9.html(JavaScript部分),图7-7 例7-12输出结果图,2createTextNo
11、de方法,createTextNode方法可以用于创建一个新的文本节点。现在改变“新增”按钮的功能:每次新增按钮的同时还要添加一些说明文字。具体实现方式是修改add方法,在其中使用createTextNode方法创建文本节点,然后附加到元素中,如例7-13所示。【例7-13】ex9.html(JavaScript部分),图7-8 例7-13输出结果图,3createDocumentFragment方法,createDocumentFragment方法可以创建一个文档片段(DocumentFragment),在文档片段中可以添加各种节点,最后一次性添加到HTML页面中。使用这种方式可以减少页面更



- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScriptnDOM 基础

链接地址:https://www.31ppt.com/p-5435964.html