| 文章索引 |
|---|
| SVG DOM规范 |
| SVG DOM对象 |
| SVG DOM交互 |
| 所有页面 |
什么是SVG DOM规范?SVG DOM遵循DOM1和DOM2，而且完全支持DOM2 Core规范。DOM 2 Core规范中最核心最主要的对象主要有：Node对象、Document对象和Element对象。本文介绍了SVG DOM对象、SVG DOM交互及SVG DOM主要事件等知识。
什么是DOM?用W3C的话来说?DOM是“一种允许程序或脚本动态地访问更新文档内容、结构和样式的、独立于平台和语言的规范化接口。“通俗一点说，DOM就是一种规范，只要遇上符合这种规范的文档，就可以在程序中引用其内容，还可以进行修改，这给文档的处理带来了相当大的灵活性。 如果你对SVG DOM还是有疑惑，请阅读“什么是DOM?以及DOM的结构和接口”一文。
SVG DOM基于DOM规范。DOM是访问和维护XML文档的应用程序接口。它定义了文档的逻辑结构以及存取和维护文档的方法。在DOM的详细说明中，“文档”指的是广泛意义的文档，XML用来代表存储在不同系统上的各种各样的信息，包括那些在传统意义上被看作数据，而不被认为是文档的信息。现在XML可以把这样的数据表示为文档，并由DOM管理。利用DOM可以建立文档，遍历文档结构，还可以增加、删除、修改文档元素和内容。
SVG DOM遵循DOM1、DOM2规范的大部分内容，因此，SVG中的每个属性和样式都可以通过脚本编程来访问；另外，SVG也提供了一套扩展的DOM接口，让通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图象的运动。
SVG DOM遵循DOM1和DOM2，而且完全支持DOM2 Core规范。
DOM 2 Core规范中最核心最主要的对象主要有：Node对象、Document对象和Element对象。
Node对象是DOM中一个最基本的对象。使用它可以遍历整个文档，其中用到的属性主要有：parentNode(一个只读Node对象)、childNodes(一个只读NodeList对象)、firstChild(一个只读Node对象)、lastChild(一个只读Node对象)、previousSibling(一个只读Node对象)、nextSibling(一个只读Node对象)、ownerDocument(一个只读Document对象)。图1可以说明它们的关系。
Node对象还有一些很有用的方法，可以动态改变DOM层次结构，主要的有:insertBefore(newChild, refChild)、replaceChild(newChild,o ldChild)、removeChild(oldChild)、appendChild(newChild)、cloneNode(deep)等。
Document对象象征着XML文档DOM树的根，所有Node对象的ownerDocument属性就和它联系，主要为了方便每个Node找到创建者。Document对象从Node对象继承，除了拥有所有Node对象的属性和方法之外，还有自己的属性和方法，其中的。reateElement(tagName)和getElementByld(elementld)方法都返回Element对象，用于创建元素和按ID寻找元素，用得很多。
Element对象从Node对象继承，除了拥有所有Node对象的属性和方法之外，还有自己的属性和方法，其中的属性tagName(一个String数据)和方法getAttribute(name)和setAttribute(name,va lue)是属性的获取、修改的基本手段。
DOM2 Core中还有用于管理节点集合的对象，主要有代表节点链表集合的NodeList对象和代表以名字为关键字的散列集合的NamedNodeMap对象。
在标准DOM之外，SVG DOM提供自己特殊的DOM对象，其中主要用到了ElementTimeControl对象，它的方法beginElemento、endElement()可以让动画立刻开始和结束，这对脚本控制动画来说至关重要。
SVG DOM的交互功能的实现主要靠事件(Event)和脚本配合来完成，表1列出了重要的一些事件。
表1 SVG DOM主要事件列表
| Event名称 | 描述 | DOM2名字 | Event属性名 |
| focusin | 当一个元素收到焦点时发生 | DOMFocusln | onfocusin |
| focusout | 当一个元素失去焦点时发生 | DOMFocusOut | onfocusout |
| activa | 当元素被激活时发生 | DOMActivate | onactivate |
| click | 当元素被鼠标等点设备单击时发生 | (同名) | onclick |
| mousedown | 当元素被鼠标等点设备的按钮按下时发生 | (同名) | onmousedown |
| mouseup | 当鼠标等点设备的按钮在元素上放开时发生 | (同名) | onmouseup |
| mouseover | 当鼠标等点设备移入元素时发生 | (同名) | onmouseover |
| mousemove | 当鼠标等点设备在元素上移动时发生 | (同名) | onmousemove |
| mouseout | 当鼠标等点设备移出元素时发生 | (同名) | onmouseout |
| SVGLoad | 当客户程序完全解析所有元素准备将元素渲染到目标设备时发生 | (同名) | onload |
| SVGUnload | 仅仅在svg元素被从DOM的window或frame中删除时发生 | (同名) | onunload |
| SVGAbort | 在元素被完全加载前页面被停止时发生 | (同名) | onabort |
| SVGError | 当元素不能正确加载时或者在执行脚本时发生了错误时发生 | (同名) | onerror |
| SVGResize | 当文档视口尺寸发生变化时发生，该事件的目标是svg元素 | (同名) | onresize |
| beginEvent | 当动画元素开始时发生，细节请看SMIL动画规范中的TimeEvent接口的描述 | 无 | onbegin |
| endEvent | 当动画元素结束时发生，细节请看SMIL动画规范中的TimeEvent接口的描述 | 无 | onend |
| repeatEvent | 当动画元素每次重复开始时发生，细节请看SMIL动画规范中的TimeEvent接口的描述 | 无 | onrepeat |
SVG DOM与SVG动画有着密切的关连，SVG DOM产生动画的方式是由脚本语言调用DOM对象的属性和方法实现的，在SVG中使用脚本语言和HTML中类似，你可以通过“SVG动画编程及其应用”一文获得这方面的内容。
关于作者
万里，1997年7月毕业于西北大学化学工程与机械专业，1998年8月进入金山公司担任软件工程师，参加WPS多个版本开发工作，其中WPS2000荣获国家科技进步二等奖。
2003年9月入哈尔滨工业大学软件学院攻读软件工程硕士。
(THE END)
