JavaScriptnDOM基础.ppt

第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 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核心接口,表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的所有文档：,7.2 使用DOM,DOM在HTML页面中的应用包括以下几类：（1）访问指定节点；（2）访问相关节点；（3）访问节点属性；（4）检查节点类型；（5）创建节点；（6）操作节点。,7.2.1 访问指定节点,“访问指定节点”的含义是已知节点的某个属性（如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方法,getElementsByName方法将查找所有元素对象，返回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（JavaScript部分）,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位置处的节点。,但是这些方法使用时有些累赘，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 访问相关节点,“访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。下面介绍在DOM中访问相关节点的方法。,1documentElement属性,通过documentElement属性可以很方便地访问到HTML文档的根节点，即元素。【例7-8】ex6.html,2ownerDocument属性,ownerDocument属性也是在Node接口中定义的，该属性返回了DOM节点所在的文档对象。【例7-9】ex7.html,3访问子节点,Node接口定义了以下的属性，可以用于访问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节点的nodeType和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页面。【例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方法,createDocumentFragment方法可以创建一个文档片段（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使用“模板”方式创建节点，这对于需要在页面中创建大量类似节点的情况特别有用。可以首先创建一个“模板”节点，创建新节点时首先调用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方法，如appendChild()，removeChild()等，也可以使用非标准的innerHTML属性。我们一直在强调使用DOM定义的方法和属性，但innerHTML属性是一个例外。,1使用DOM标准方法,DOM中可以使节点发生变化的常用方法包括：（1）appendChild：为当前节点新增一个子节点，并且将其作为最后一个子节点；（2）insertBefore：为当前节点新增一个子节点，将其插入到指定的子节点之前；（3）replaceChild：将当前节点的某个子节点替换为其他节点；（4）removeChild：删除当前节点的某个子节点。,【例7-19】ex12.html（HTML部分）,（a）页面初始状态（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）页面初始状态（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编程中经常需要实现的功能。例如大多数网站对用户名的长度、密码的复杂程度都有一定的要求，在用户填写表单时应对其输入内容进行必要的验证，尽可能地保证用户填写内容的正确性。,对于以上的登录页面，假设网站要求用户名长度大于3，可以通过以下的脚本在用户输入的同时给予相应的提示。我们为“用户名”文本输入框添加onblur事件响应，当焦点离开文本框时对输入框的内容进行验证，在页面上输出相应的提示信息。,【例7-25】form_verify.html（HTML部分）【例7-26】遍历所有的输入框，添加onblur事件响应函数【例7-27】为某个页面元素添加onblur事件响应函数,（a）验证成功（b）验证失败图7-15 表单输入校验,7.3.3 双向选择列表框,本节将要实现的是如图7-16所示的双向选择列表框。在列表框中选择一个或者多个选项，通过相应的按钮操作可以将选项在两个列表框之间任意地移动。双向选择列表框的优点是它可以以比较直观的方式进行相关选项的选择，类似的功能需求在很多网络应用中都会出现。例7-28所示为双向选择列表框的HTML页面代码，其运行效果如图7-16（a）所示。,（a）初始状态（b）移动选项后的列表框图7-16 双向选择列表框,【例7-28】selects.html（HTML部分）【例7-29】moveRight方法【例7-30】moveRightAll方法,7.3.4 关键词链接,图7-17所示为Wiki网站中的一个页面（摘自http:/JavaScript），其中的关键词均以链接的形式呈现。类似的方式在其他网络应用中也十分常见。实现这类页面有两种实现方式，一是直接修改HTML页面，将关键词部分替换为链接；二是通过JavaScript进行动态修改。目前很多网站由于采用后台程序生成静态HTML页面，由后台程序完成链接的替换工作。但某些网站的页面仍然需要手工的编辑，那么这样的修改就会非常繁琐。,无论自动修改还是手工修改，最终生成HTML页面的结构会变得非常零乱。本节将介绍一种使用JavaScript增加关键词链接的方法，使用该方法可以在不修改页面HTML代码的情况下实现类似图7-17的效果。首先来看原始的HTML页面代码，如例7-31所示。其中包括一段描述文字。,【例7-31】keywords.html（HTML部分）,图7-17 Wiki网站中的关键词链接,（a）原始页面（b）添加关键词链接后的页面图7-18 添加关键词链接,7.3.5 可排序表格,在桌面应用实现可排序表格非常容易，有很多相关的控件可以使用，但是HTML中的表格元素不具备排序的能力。但在Web应用中，我们经常需要实现按某一列对表格排序的功能。本节将介绍一种通用的方法，通过JavaScript实现表格的排序。,1排序方法,对表格排序，实际是将表格内的各种数据进行排序，因此有必要了解在JavaScript中如何对各种类型的数据进行排序。JavaScript中对数组对象执行sort方法即可对数组内的元素进行排序，对于原始数据类型（字符串、数字、日期时间和布尔型），直接将值存入数组，执行sort方法即可获得有序的数组。,例如：var arr=6,8,10,7,9;/无序数组arr.sort();/arr为6,7,8,9,10很多情况下对同一个排序字段需要进行正序和逆序排列，对于正序的数组可以直接调用reverse方法进行逆序排列。,例如：var arr=6,8,10,7,9;/无序数组arr.sort();/arr为6,7,8,9,10arr.reverse();/arr为10,9,8,7,6,除了综合使用sort和reverse方法对数组进行逆序排列之外，还可以通过指定比较函数的方式实现逆序排列。,2比较表格中的两行,JavaScript原始数据类型的排序方式可以扩展到任意类型的数据，甚至页面中的DOM元素也可以进行排序，前提是为它们指定一个合理的比较规则，即如何实现以下形式的比较函数：function compTr(trA,trB).,对表格中的行进行比较时需要确定以下3个因素：（1）表格排序字段（2）排序字段的数据类型（3）排序方式（正序或者逆序）,下面将根据这3个因素生成相应的compTr函数，生成compTr函数的方法声明如下：function createComp(col,type,inverse),3表格排序,表格中的行保存在表格节点的rows集合对象中，rows集合并非Array对象，因此要对表格进行排序首先要将表格的每一行保存在数组对象中。下面介绍的sort方法采取的方式是将rows对象中相对应的元素依次取出，存入数组allTr中，然后对数组中的元素进行排序（当然在allTr中进行排序不会对页面显示产生影响）；接下来创建一个文档片段，在sort方法中将allTr数组中的元素依次附加到文档片段中；最后将文档片段附加到表格内部，从而使表格中所有的行都按照排序后的顺序显示。,【例7-32】sorttable_1.html,（a）未排序的表格（b）排序后的表格图7-19 表格排序,【例7-33】sorttable_2.html（JavaScript部分）,（a）按字符串字段排序（b）按数字字段排序,（c）按日期时间字段排序（d）按布尔型字段逆排序图7-20 表格排序,小 结,本章首先对DOM标准进行了介绍，讲解了如何使用JavaScript进行DOM编程，然后结合常见的应用场景，通过多个示例说明如何通过DOM编程解决Web应用开发中的一些实际问题，如表格排序、表单验证、添加关键词链接等。本章的示例不仅仅限于解决某个具体的问题，同时也尽可能地提供通用的解决方案，提高代码的可复用程度。,