第7章DOM基础.pptVIP

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 1～3，但浏览器厂商并没有完全按照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.2 DOM标准接口 1．DOM核心接口 2．DOM HTML接口 7.1.3 DOM标准的使用 以上对DOM标准的核心对象作了简要介绍，那么在实际应用中如何判断我们使用的方法是DOM标准所定义的呢？ 最直接的方法是查阅DOM的标准规范，在下面的网址可以找到DOM Level 1～3的所有文档： /DOM/DOMTR 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方法是最快的节点访问方法。 例如例7-2所示的HTML页面。 【例7-2】 ex2.html（HTML部分） 【例7-3】 ex2.html（完整） 2．getElementsByName方法 getElementsByName方法将查找所有元素对象，返回name属性为指定值的元素对象列表。 例如例7-4所示的HTML页面。 【例7-4】 ex3.html（HTML部分） 3．getElementsByTagName方法 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）setAttr