快捷搜索:

使用 Dojo 的 Ajax 应用开发进阶教程,第 4 部分:

DOM 的全称是文档工具模型(Document Object Model)。它是 HTML 和 XML 文档的 API。它定义了文档的逻辑布局,以及对文档进行造访和操作的要领。经由过程 DOM,开拓职员可以在文档中自由导航, 也可以添加、更新和删除此中的元素和内容。基础上文档中的任何内容都是可以经由过程 DOM 进行造访和操作的。本文具体先容了若何应用 DOM 基础 API 和 Dojo 来进行 DOM 查询和操作。应用的 Dojo 版本是 1.4。下面首先先容 DOM 的基础观点。

DOM 基础观点

DOM 是给脚本说话(如 JavaScript 和 VBScript 等)来应用的 API。在互联网的早期,HTML 页面都是静态的。开拓职员没有法子对页面进行动态改动。DOM 的呈现办理了这个问题。DOM 给出了一种描述 HTML 文档布局的要领,并且容许开拓职员经由过程 DOM 供给的 API 来对文档布局进行改动。DOM 今朝是 W3C 的保举规范。主流的浏览器都实现或部分实现该规范。下面首先先容 DOM 规范的版本历史。

DOM 规范的版本历史

DOM 从呈现之后,颠最后赓续的成长变更,以及 W3C 组织的标准化事情,是以今朝的版本对照多,详细如下所示:

DOM 级别 0:1996 年,Netscape 公司的 Netscape Navigator 2.0 浏览器中率先引入了 JavaScript 这一脚本说话。开拓职员可以使用 JavaScript 来操作页面上的元素。此时的 DOM 称为 DOM 级别 0。它只支持对页面中的表单、链接和图像进行操作。

中心 DOM:中心 DOM(Intermediate DOM)指的是 DOM 级别 0 和 DOM 级别 1 之间的一其中心版本。在这个版本中,可以经由过程 JavaScript 来改变页面的样式表。别的,页面上更多的元素可以经由过程 DOM 来进行操作。

DOM 级别 1:DOM 级别 1 是由 W3C 拟订的 DOM 规范标准,在 1998 年宣布。DOM 级别 1 的规范定义了造访和操作 HTML 页面中元素的基础要领。

DOM 级别 2:DOM 级别 2 在 DOM 级别 1 的根基上增添了 getElementById()措施、DOM 遍历和范围、名称空间和 CSS 的支持。

DOM 级别 3:DOM 级别 3 在 DOM 级别 2 的根基上增添了 adoptNode()和 textContent等措施和属性、文档保存和加载、文档验证和 XPath 等。

本文中将重点先容 DOM 级别 1 和级别 2 的部分。这些部分的内容今朝在不合浏览器之间的兼容性较好,而且也很常用。下面重点先容 DOM 规范中的基础元素。

DOM 基础元素

对付 HTML 文档中的基础元素,DOM 都有一个抽象的接口与它对应。

文档(Document):文档接口用来表示全部 HTML 文档。对文档中其它元素和内容的造访和操作,都是从这个接口启程的。

文档片段(DocumentFragment):文档片段用来表示全部文档树中的一个部分。

节点(Node):节点接口用来表示 HTML 文档树中的一个节点。这是一个抽象的接口,在文档树中详细存在的都是该接口的子类型,如元素、属性和文本节点等。

节点列表(NodeList):节点列表表示的是节点的一个有序聚拢。它的感化类似于 Java 中的 java.util.List接口。可以经由过程节点在聚拢中的序号来获取聚拢中的某个节点。

命名节点映射表(NamedNodeMap):命名节点映射表表示的是可以根据名称来进行存取的节点聚拢。它的感化类似于 Java 中的 java.util.Map接口。

元素(Element):元素是节点的一种子类型,可以包孕子节点和属性。

属性(Attr):属性用来描述元素的特性。它并不是文档树的一部分。

文本(Text):文本表示元素和属性的文本内容。

DOM 非常(DOMException):DOM 非常用来表示 DOM 操作无法履行时的差错环境。DOM 非常中定义了一系列的掉足前提与差错代码。

DOM 实现(DOMImplementation):DOM 实现表示与 DOM 接口对应的详细实现。

这里必要留意的是节点列表中的节点是动态的,它反应的是最新的文档布局。比如经由过程 DOM API 得到了某个元素的子节点列表,假云云中的某个子节点被删除,此节点就不会呈现在之前的节点列表中。

在先容完 DOM 的基础观点之后,下面先容若何应用 DOM 对当前文档树进行查询。

DOM 查询

经由过程 DOM 供给的 API 来对当前文档树进行查询,是操作文档的条件。因为文档树布局可能很繁杂,查询到所需节点的操作有可能会对照繁琐。这里先容两种措施来进行查询,一种是使用 DOM 规范中定义的基础 API,别的一种是应用 Dojo。下面先从基础 API 开始。

应用基础 API

应用 DOM 规范中供给的 API,就可以对文档进行查询,以及在文档中自由导航。下面给出一些常用的措施和属性。

首先先容的是两个用来在文档树中快速查找元素的措施:getElementById()和 getElementsByTagName()。

文档接口的 getElementById(elementId)措施是在 DOM 级别 2 中引入的。该措施的感化是在文档中查找标识符为 elementId的元素。假如有,则返回该元素;否则返回 null。对 HTML 文档来说,元素的标识符是经由过程属性 id来指定的。如 document.getElementById("mySpan")在当前文档中查找标识符为 mySpan的元素。

文档和元素接口的 getElementsByTagName(tagname)措施用来查找标署名为 tagname的子元素。该措施的返回结果是节点列表,此中子元素的排列顺序是树遍历时的先序顺序。经由过程指定 tagname的值为 *,可以匹配所有标签。如 document.getElementsByTagName("div")查找当前文档中所有的 div元素。

下面先容在查找到单个节点之后,若何查找其相邻节点。

在文档树中,每个节点的详细类型不尽相同。在节点接口中定义了属性 nodeType用来获取当前节点的详细类型。该属性的值是一系列预定义的常量值。属性 nodeName和 nodeValue的值也与节点的详细类型相关。如对付元素节点来说,nodeName的值是标署名称,nodeValue的值是 null;对付属性节点来说,nodeName和 nodeValue的值分手是属性的名称和值;对付文本节点来说,nodeName的值是 #text,nodeValue的值是文本的内容。

在造访文档树的时刻,一个常见的需求是造访当前节点的父节点、兄弟节点和子节点。节点接口中供给了响应的属性用来获取这些节点。

parentNode:获取当前节点的父节点。除了文档、文档片段和属性之外的其它节点都可以拥有父节点。

childNodes:获取当前节点的子节点,是一个节点列表。

hasChildNodes():该措施用来判断当前节点是否有子节点。

firstChild:获取当前节点的第一个子节点。假如没有则返回 null。

lastChild:获取当前节点的着末一个子节点。假如没有则返回 null。

previousSibling:获取呈现在当前节点正前面的兄弟节点。假如没有则返回 null。

nextSibling:获取呈现在当前节点正后面的兄弟节点。假如没有则返回 null。

节点接口还供给了 attributes属性用来获取节点的属性。对付元素节点,返回的是一个命名节点映射表;对付其它类型的节点,返回的是 null。经由过程属性 ownerDocument可以获取节点所在的文档。

上面先容的这些基础 API 是由浏览器来实现的。下面先容 Dojo 供给的 dojo.query。

应用 dojo.query

应用上面提到的 DOM 规范定义的基础 API,可以完成对 HTML 文档的查询。不过基础 API 的主要问题在于所供给的措施粒度较细。即就是满意一些简单的查询需求,也必要相称多的代码量。比如查找某个 div元素下面所有的 span元素,就必要用到 getElementById()和 getElementsByTagName()两个措施。而对 DOM 进行查询又是十分常用的操作,是以开拓职员必要加倍方便的进行 DOM 查询的措施。Dojo 中供给了 dojo.query 库,用来方便的进行 DOM 查询。dojo.query 的基础用法是应用 CSS 3 的选择器语法来选择 HTML 文档中的节点。对付繁杂的查询前提,可以用繁杂的 CSS 选择器来描述。应用 dojo.query 可以极大年夜的低落代码量。比如上面提到的例子,用 dojo.query 的话只必要一行代码就足够了:dojo.query("#myDiv span")。别的 dojo.query 应用的是 CSS 的选择器语法,这对付开拓职员来说并不陌生。代码清单 1中给出了一些常用的 dojo.query 的用法。

清单 1. 常用的 dojo.query 用法

dojo.query("#header > h1")  //ID 为 header 的元素的直接子节点中的 h3 元素

dojo.query("span[title^='test']") // 属性 title 以字符串 test 开首的 span 元素

dojo.query("div[id$='widget']") // 属性 id 以字符串 widget 结尾的 div 元素

dojo.query("input[name*='value']") // 属性 name 包孕子串 value 的 input 元素

dojo.query("#myDiv, .error") // 组合查询,结果中包孕 ID 为 myDiv 的元素和 CSS 类为 error 的元素

dojo.query(".message.info") // 同时包孕了 CSS 类 message 和 info 的元素,留意两个类之间不包孕空格

dojo.query("tr:nth-child(even)") // 呈现在父节点的偶数位置的 tr 元素

dojo.query("input[type=checkbox]:checked") // 所有选中状态的复选框

dojo.query(".message:not(:nth-child(odd))") // 嵌套子查询,选中包孕 CSS 类 message,

//并且不呈现在父节点的奇数位置的元素

dojo.query措施除了第一个必须的参数用来表示所用的选择器语法之外,还有一个可选的参数用来指定查询的范围,可所以一个 ID 或是元素。假如传入该参数,则查询结果中只包孕该元素的子节点。默认的查询范围是全部文档树。如 dojo.query("span.info", "myDiv")只在 ID 为 myDiv的元素的子节点中查询包孕 CSS 类 info的 span 元素。纯熟应用 dojo.query 的条件前提是对 CSS 3 规范定义的选择器语法对照认识。

dojo.query 的别的一个强大年夜功能是可以对选择出来的节点进行统一处置惩罚。经由过程措施级联还可以写出异常简洁的代码。下面的章节中将会具体先容 dojo.query 的这一能力。

在先容完应用基础 API 和 dojo.query进行 DOM 查询之后,下面先容若何进行 DOM 操作。

DOM 操作

在经由过程上面先容的基础 API 或是 dojo.query 查询到所需的节点之后,下面就可以对这些节点进行操作了。查询是为操作办事的。对 DOM 的操作包括对节点的创建、插入、更新和删除操作。下面将详细先容若何应用基础 API 和 Dojo 来完成 DOM 操作。

应用基础 API

创建新的节点的统一进口是定义在文档接口中的一系列措施。这些措施都以 create开首。常用的措施有 createElement(tagName)用来创建一个标署名为 tagName的元素;createTextNode(data)用来创建一个内容为 data的文本节点;createAttribute(name)用来创建一个名称为 name的属性节点;createDocumentFragment()用来创建一个文档片段。

创建出新的节点之后,就必要将其插入到当前文档树中。节点接口定义了两个措施用来完成插入的操作。

appendChild(newChild):把节点 newChild添加到当前节点的子节点列表中。

insertBefore(newChild, refChild):与 appendChild()类似的是都是把节点 newChild添加到当前节点的子节点列表中,不合的是可以经由过程参数 refChild来指定位置。节点 newChild呈现在节点 refChild的正前面。

节点接口的 replaceChild(newChild, oldChild)措施用来将当前节点的子节点 oldChild调换成新的节点 newChild。措施 removeChild(oldChild)用来删除当前节点的子节点 oldChild。

对付元素节点来说,可以对其属性进行操作。措施 setAttribute(name, value)用来设置名为 name的属性的值为 value。措施 removeAttribute(name)用来删革职为 name的属性。

假如一个节点已经在文档树中存在,经由过程上面提到的 appendChild()、insertBefore()和 replaceChild()措施改变其在文档树中的位置的时刻,该节点会首先被从文档树中删除,然后再被插入到新的位置中。在插入文档片段的时刻,文档片段本身并不会被插入,只有其子节点被插入到文档树中。

您可能还会对下面的文章感兴趣: