html svg dom操作,SVG DOM常用属性和方法介绍

12.2.1

文档初始化相关

evt属性

evt表示事件本身，可以通过evt获取与当前事件相关的信息，用户可以在script中定义响应函数，进行相应的处理。它与普通JavaScript脚本中的event基本相同，只不过在普通JavaScript的脚本中简写成“e”。

ownerDocument属性

通过引用该属性获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

使用举例：svgdoc =

evt.target.ownerDocument

//通过这样的话我们能够得到SVG的DOM结构树了。然后我们就要进行分析这棵DOM树了！

//深入掌握理论才能写出真正有用的程序来！

getOwnerDocument()方法

通过调用该方法获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

使用举例：svgdoc =

evt.target.getOwnerDocument()

target属性

通过引用该属性获得事件产生于哪个SVG元素，有时可能是该元素的父元素。

使用举例：object =

evt.target

getTarget()方法

通过调用该方法获得事件产生于哪个SVG元素，有时可能是该元素的父元素。

使用举例：object = evt.getTarget()

示例代码如下：

br>  "">

前面我们已经介绍过，DOM对象是一个树型的结构，并且经过载入后就放在内存中供我们读写。如何对这棵树进行操作，也就成为发挥SVG交互性很关键的一步。下面所示的方法中，有些是文档对象(Document)的方法，有些是文档元素(Element)的方法，需要区别开来。DOM可以分为三大部分：文档基本元素、文档对象和各种类型的从文档基本元素派生出的文档元素。文档对象是文档对象模型的顶级对象，它包含了整个文档的内容。各种类型的文档元素派生自文档基本元素类型，用于描述文档中各种实际存在的元素。其中可以定义一种文档元素，它们可以容纳其他的文档元素，这些元素就是容器元素，实际上文档对象就是最大的容器元素。由于文档对象模型中存在容器元素，因此所有的对象都组成一个树状结构，称为文档对象树或者DOM树，其中根节点就是文档对象。