《第7章JavaScriptnDOM基础电子教案》由会员分享，可在线阅读，更多相关《第7章JavaScriptnDOM基础电子教案（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
2、 Level 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核心接口
3、,表7-2DOM节点类型,图7-3 DOM Level 1核心接口,2DOM HTML接口,图7-4 DOM Level 1 HTML接口,7.1.3 DOM标准的使用,以上对DOM标准的核心对象作了简要介绍，那么在实际应用中如何判断我们使用的方法是DOM标准所定义的呢？ 最直接的方法是查阅DOM的标准规范，在下面的网址可以找到DOM Level 13的所有文档： http:/www.w3.org/DOM/DOMTR,7.2 使用DOM,DOM在HTML页面中的应用包括以下几类： （1）访问指定节点； （2）访问相关节点； （3）访问节点属性； （4）检查节点类型； （5）创建节点； （6）操
4、作节点。,7.2.1 访问指定节点,“访问指定节点”的含义是已知节点的某个属性（如id属性、name属性或者节点类型），在DOM树中寻找符合条件的节点。 相关的方法包括getElementById()，getElementsByName()和getElementsByTagName。,1getElementById方法,应用getElementById方法可以根据传入的id参数返回指定的元素节点。 在HTML文档中，元素的id属性是该元素对象的唯一标识，因此getElementById方法是最快的节点访问方法。 例如例7-2所示的HTML页面。,【例7-2】 ex2.html（HTML部分）
5、【例7-3】 ex2.html（完整）,2getElementsByName方法,getElementsByName方法将查找所有元素对象，返回name属性为指定值的元素对象列表。 例如例7-4所示的HTML页面。 【例7-4】 ex3.html（HTML部分）,3getElementsByTagName方法,getElementsByTagName方法将返回指定类型的元素集合，与前面介绍的getElementById和getElementsByName方法不同，getElementsByTagName不仅可以用于Document对象，而且可以用于普通的Element对象。 考虑例7-5所示的
6、HTML页面。,【例7-5】 ex4.html（HTML部分） 【例7-6】 ex4.html（JavaScript部分）,7.2.2 访问元素属性,Node接口中已经具有attributes方法，且已被所有类型的节点继承，但是只有Element节点才能拥有属性。 Element节点的attributes属性是NamedNodeMap类型的，它提供了一些用于访问和处理其内容的方法：,（1）getNamedItem(name)：返回nodeName属性值为name的节点； （2）removeNamedItem(name)：删除nodeName属性值为name的节点； （3）setNamedIte
7、m(node)：将node添加到列表，按其nodeName属性进行索引； （4）item(pos)：返回pos位置处的节点。,但是这些方法使用时有些累赘，DOM又定义了3个元素方法来帮助访问属性： （1）getAttribute(name)：相当于attributes.getNamedItem(name).value； （2）setAttribute(name, value)：相当于attributes.getNamedItem(name).value = value； （3）removeAttribute(name)：相当于attributes.removeNamedItem(name)。
8、考虑在例7-7所示的HTML页面中访问元素的属性。 【例7-7】 ex5.html,7.2.3 访问相关节点,“访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。 下面介绍在DOM中访问相关节点的方法。,1documentElement属性,通过documentElement属性可以很方便地访问到HTML文档的根节点，即元素。 【例7-8】 ex6.html,2ownerDocument属性,ownerDocument属性也是在Node接口中定义的，该属性返回了DOM节点所在的文档对象。 【例7-9】 ex7.html,3访问子节点,Node接口定义了
9、以下的属性，可以用于访问DOM节点的子节点： （1）childNodes：子节点的列表； （2）firstChild：第一个子节点； （3）lastChild：最后一个子节点。,4访问父节点,Node接口定义了parentNode属性，可以用于访问DOM节点的父节点，,5访问兄弟节点,Node接口还定义了以下的属性，用于访问DOM节点的兄弟节点： （1）previousSibling：上一个兄弟节点； （2）nextSibling：下一个兄弟节点。,7.2.4 检查节点类型,在DOM中可以使用节点的nodeType和nodeName属性检查节点的类型，表7-3所示为各类DOM节点的nodeTy
10、pe和nodeName属性值。,表7-3DOM节点的nodeType和nodeName,【例7-10】 ex8.html,图7-6 例7-10输出结果图,7.2.5 创建节点,DOM标准中用于创建节点的方法包括： （1）createElement方法：创建HTML元素； （2）createTextNode：创建文本节点； （3）createDocumentFragment方法：创建DOM文档片段； （4）cloneNode方法：通过复制已有节点创建新节点。,1createElement方法,createElement方法用于在HTML文档中创建新的元素。 考虑例7-11所示的HTML页面。 【
11、例7-11】 ex9.html（HTML部分） 【例7-12】 ex9.html（JavaScript部分）,图7-7 例7-12输出结果图,2createTextNode方法,createTextNode方法可以用于创建一个新的文本节点。 现在改变“新增”按钮的功能：每次新增按钮的同时还要添加一些说明文字。 具体实现方式是修改add方法，在其中使用createTextNode方法创建文本节点，然后附加到元素中，如例7-13所示。 【例7-13】 ex9.html（JavaScript部分）,图7-8 例7-13输出结果图,3createDocumentFragment方法,createDoc
12、umentFragment方法可以创建一个文档片段（DocumentFragment），在文档片段中可以添加各种节点，最后一次性添加到HTML页面中。 使用这种方式可以减少页面更新的次数，提高页面展示的效率。,【例7-14】 ex9.html（JavaScript部分）,图7-9 例7-14输出结果图,【例7-15】 ex10.html（HTML部分） 【例7-16】 ex10.html（JavaScript部分）,图7-10 例7-15、例7-16输出结果图,4cloneNode方法,cloneNode方法使得我们可以在DOM使用“模板”方式创建节点，这对于需要在页面中创建大量类似节点的情况
13、特别有用。 可以首先创建一个“模板”节点，创建新节点时首先调用cloneNode方法获得“模板”节点的副本，然后根据实际应用的需要对该副本节点进行局部内容的修改。,使用cloneNode方法是一种非常高效的创建节点的方式。 考虑例7-17所示的HTML页面，现在希望在页面中添加类似的内容（标题+文本内容）。 【例7-17】 ex11.html（HTML部分）,（a）页面初始状态 （b）添加内容后的页面 图7-11 使用cloneNode方法创建新节点,【例7-18】 ex11.html（JavaScript部分）,7.2.6 操作节点,操作DOM节点可以使用标准的DOM方法，如appendCh
14、ild()，removeChild()等，也可以使用非标准的innerHTML属性。 我们一直在强调使用DOM定义的方法和属性，但innerHTML属性是一个例外。,1使用DOM标准方法,DOM中可以使节点发生变化的常用方法包括： （1）appendChild：为当前节点新增一个子节点，并且将其作为最后一个子节点； （2）insertBefore：为当前节点新增一个子节点，将其插入到指定的子节点之前； （3）replaceChild：将当前节点的某个子节点替换为其他节点； （4）removeChild：删除当前节点的某个子节点。,【例7-19】 ex12.html（HTML部分）,（a）页面初
15、始状态 （b）删除、修改DOM节点后的页面 图7-12 删除和修改DOM节点,【例7-20】 ex12.html（JavaScript部分）,2使用innerHTML属性,上面介绍了多种访问和操作DOM节点的方法，这些方法的基础是DOM树结构，它们完成的功能不外乎对树形结构的修改。 这类方法并不适用于所有的应用场景，有些情况下可能会要求直接修改节点的HTML代码，而不关心DOM树结构如何修改。 在这种情况下应该使用innerHTML属性对节点进行操作。 例7-21是一个HTML页面的代码，页面最初的显示效果如图7-13（a）所示。,【例7-21】 ex13.html（HTML部分）,（a）页面
16、初始状态 （b）修改后的页面 图7-13 innerHTML属性,【例7-22】 ex13.html（JavaScript部分）,7.3 DOM应用示例,在Web编程中，DOM几乎无处不在，本章将根据实际应用开发中经常遇到的场景，提供相应的解决方案。,7.3.1 文本框自动获得焦点,在浏览网站时经常需要在输入框中输入文字，例如用户登录页面，搜索页面等。很多注重用户体验的网站往往会使页面中的文本框自动获得焦点，免去了用户用鼠标单击输入框进行输入的不便。 本节将模拟一个用户登录的页面，在其中实现该功能。 登录页面HTML代码如例7-23所示。 【例7-23】 autofocus.html（HTML部分）,图7-14 文本框自动聚焦,【例7-24】 autofocus.html（JavaScript部分）,7.3.2 表单输入验证,表单输入验证也是在JavaScript编程中经常需要实现的功能。 例如大多数网站对用户名的长度、密码的复杂程度都
