第七章DOM基础案例

JavaScript程序设计教程软件学院胡沛2016年10月第七章DOM基础DOM标准7.1使用DOM7.2DOM实例7.3DOM（DocumentObjectModel，文档对象模型）是由W3C制定的标准，它为应用程序访问和操作XML和HTML文档提供了一套标准的API。DOM可以分为3个部分：核心DOM接口以及针对XML和HTML的DOM标准接口。JavaScript编程中使用的是HTMLDOM，是在核心DOM的基础上扩展而来的。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。7.1DOM标准DOM是由W3C制定的标准，目前有3个不同的版本，分别称之为DOMLevel1～3，但浏览器厂商并没有完全按照DOM标准来实现浏览器。目前与DOM标准兼容最好的浏览器是MozillaFilefox，它实现了绝大部分的DOMLevel2特性和少量DOMLevel3特性，而InternetExplorer在这方面落在最后，它对DOMLevel1的实现都还不完整，尚有很面有待完善。7.1.1什么是DOMDOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。DOM是这样规定的：整个文档是一个文档节点。每个HTML标签是一个元素节点。包含在HTML元素中的文本是文本节点。每一个HTML属性是一个属性节点。注释属于注释节点。7.2使用DOMDOM在HTML页面中的应用包括以下几类：（1）访问指定节点；（2）访问相关节点；（3）访问节点属性；（4）检查节点类型；（5）创建节点；（6）操作节点。7.2.1访问指定节点“访问指定节点”的含义是已知节点的某个属性（如id属性、name属性或者节点类型），在DOM树中寻找符合条件的节点。相关的方法包括getElementById()，getElementsByName()和getElementsByTagName。1．getElementById方法应用getElementById方法可以根据传入的id参数返回指定的元素节点。在HTML文档中，元素的id属性是该元素对象的唯一标识，因此getElementById方法是最快的节点访问方法。出于浏览器兼容考虑，表单中name名不要和其他元素的ID相同。2．getElementsByName方法getElementsByName方法将查找所有元素对象，返回name属性为指定值的元素对象列表。常用在单选按钮上。所有单选按钮须有相同的name。varinput=document.getElementsByName(radio);alert(input[0].value);alert(input.item(0).value);3．getElementsByTagName方法getElementsByTagName方法将返回指定类型的元素集合，与前面介绍的getElementById和getElementsByName方法不同，getElementsByTagName不仅可以用于Document对象，而且可以用于普通的Element对象。7.2.2访问元素属性DOM又定义了3个元素方法来帮助访问属性：（1）getAttribute(name)：相当于attributes.getNamedItem(name).value；getAttribute()还可以取得自定义特性的特性值。（2）removeAttribute(name)：相当于attributes.removeNamedItem(name)。（3）setAttribute(name,value)：相当于attributes.getNamedItem(name).value=value；接受两个参数：要设置的特性名和值。如果存在，会替换原有值；如果不存在，会创建该属性并赋值。htmlheadtitleHTMLSamplePage/titlescripttype=text/javascriptfunctioninit(){varimg=document.getElementById(img1);varall_attr=document.getElementById(img1).attributes;varsrc_attr=all_attr.getNamedItem(src);alert(img.className);alert(img.getAttribute(className));varsrc_attr=img.getAttribute(src);alert(src_attr);img.setAttribute(test1,123);alert(img.test1);}/script/headbodyonload=init()imgid=img1src=img1.gifalt=img1class=class1//body/html7.2.3访问相关节点“访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。1．documentElement属性通过documentElement属性可以很方便地访问到HTML文档的根节点，即html元素。2．ownerDocument属性ownerDocument属性也是在Node接口中定义的，该属性返回了DOM节点所在的文档对象。文档中所有的节点之间都存在这样或那样的关系，节点间的各种关系可以用传统的家族关系来描述。每个节点都有一个childNodes属性，也都有一个parnetNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都有相同的父节点，因此他们的parentNode属性都指向同一个节点。此外，包含在childNodes列表中的每个节点相互之间都是兄弟节点，具有previousSibling和nextSibling属性。3．访问子节点Node接口定义了以下的属性，可以用于访问DOM节点的子节点：（1）childNodes：子节点的列表；（2）firstChild：第一个子节点；（3）lastChild：最后一个子节点。4．访问父节点Node接口定义了parentNode属性，可以用于访问DOM节点的父节点。5．访问兄弟节点Node接口还定义了以下的属性，用于访问DOM节点的兄弟节点：（1）previousSibling：上一个兄弟节点；（2）nextSibling：下一个兄弟节点。7.2.4创建节点DOM标准中用于创建节点的方法包括：（1）createElement方法：创建HTML元素；（2）createTextNode：创建文本节点；（3）createDocumentFragment方法：创建DOM文档片段；（4）cloneNode方法：通过复制已有节点创建新节点。1．createElement方法createElement方法用于在HTML文档中创建新的元素。2．createTextNode方法createTextNode方法可以用于创建一个新的文本节点。3．createDocumentFragment方法createDocumentFragment方法可以创建一个文档片段（DocumentFragment），在文档片段中可以添加各种节点，最后一次性添加到HTML页面中。使用这种方式可以减少页面更新的次数，提高页面展示的效率。4．cloneNode方法cloneNode方法使得我们可以在DOM使用“模板”方式创建节点，这对于需要在页面中创建大量类似节点的情况特别有用。可以首先创建一个“模板”节点，创建新节点时首先调用cloneNode方法获得“模板”节点的副本，然后根据实际应用的需要对该副本节点进行局部内容的修改。接收两个参数，如果参数为true为深复制，也就是复制节点及其整个子节点树；如果参数为false。为浅复制，只复制节点本身。7.2.5操作节点操作DOM节点可以使用标准的DOM方法，如appendChild()，removeChild()1．使用DOM标准方法（1）appendChild：为当前节点新增一个子节点，并且将其作为最后一个子节点。appendChild()向childNodes列表的末尾添加一个节点。添加完成后更新相关信息。如果传入到appenChild()中的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置。（2）insertBefore：为当前节点新增一个子节点，将其插入到指定的子节点之前。如果需要把节点放在childNodes列表中某个特定位置上，而不是末尾，可以使用insertBefore()方法，第一个参数为要插入的节点，第二个参数作为参照的节点。（3）replaceChild：将当前节点的某个子节点替换为其他节点。接收两个参数：要插入的节点和要替换的节点。（4）removeChild：删除当前节点的某个子节点。补充innerText属性可以操作元素中包含的所有文本内容。innerHTML属性其处理的是HTML字符串，而innerText处理的是普通文本字符串。innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器。小结本章首先对DOM标准进行了介绍，讲解了如何使用JavaScript进行DOM编程，然后结合常见的应用场景，通过多个示例说明如何通过DOM编程解决Web应用开发中的一些实际问题，如表格排序、表单验证、添加关键词链接等。实验1.实验名称：双向选择列表框。2.实验目的：掌握DOM表单用法。3.实验内容：两个选项列表,选中左边或者右边选项，点右移或者左移，相应的选项就会被移到另外的选项列表。每做完一个实验，都要书写一份上机实验报告，实验报告内容应包括实验的目的要求、实验内容、详细操作步骤，同时给出实验的结果。每一份报告要求附上本次实验的源代码。人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。