扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
HTML5中SVG DOM及DOM操作是怎样的,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联公司成立于2013年,是专业互联网技术服务公司,拥有项目成都网站建设、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元思南做网站,已为上家服务,为思南各地企业和个人服务,联系电话:18980820575
使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVG DOM。当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉,下面只是简单的看一下。
HTML页面中的DOM操作
DOM大家应该很熟悉了,这里先看一个小例子:
代码如下:
发现了没,与普通的html元素的DOM操作完全一样:
选择元素:document.getElementById
创建元素:document.createElementNS
创建子元素的另外一种方式:element.createChilDNS
添加元素:node.appendChild
设置元素的属性:element.setAttributeNS/element.setAttribute
除了上面这几个操作,下面的操作和属性也很常见:
获取元素的属性值: element.getAttributeNS/element.getAttribute
检查元素是否存在某属性:element.hasAttributeNS
移除元素的某属性:element.removeAttributeNS
父元素、子元素和兄弟节点:element.parentNode/element.firstChild/child.nextSibling
这些方法这里不再详细介绍了;此外,DOM树的节点结构,对象之间的继承关系也都是差不多的,就不详述了。需要的同学参看后面的DOM Core Object的文档。
不过,需要注意的是SVG本质上是XML文档,所以基本采用的DOM方法都是带NS结尾的方式,来提供相关的namespace;如果创建元素时已经提供了namespace,而且没有多个namespace的问题,那么设置相关属性的时候,也可以选择使用不带NS的版本,比如直接使用element.setAttribute设置属性值,但是总的来说,还是强烈推荐使用带NS结尾的版本,因为这个版本总是工作正常的,即使是在多namespace的情况下。
SVG DOM
这个与标准的DOM有哪些不同,我也没找到什么全面的资料,目前只知道对属性的赋值方式是不同的。如果有了解这方面的同学还请吱一声啊。
上面的例子中,我们使用element.setAttributeNS/element.setAttribute来给属性赋值,在SVG DOM中,可以使用面向对象的方式,通过访问点号来给对象的属性赋值,比如下面是两种方式的对比:
普通的DOM方式:
代码如下:
element.setAttribute("x", "10");
element.setAttribute("y", "20");
element.setAttribute("width", "100%");
element.setAttribute("height", "2em");
而SVG DOM的方式:
代码如下:
element.x.baseVal.value = 10;
element.y.baseVal.value = 20;
element.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10);
DOM脚本属于传统的脚本,其特征是通过构建“值字符串”来设置各个项。SVG DOM脚本样式的优点是,你不必构建“值字符串”,所以性能优于DOM脚本。
嵌入SVG的脚本
如果要在SVG内部添加脚本,就需要使用script元素,这个前面已经讲过了,除了这一点,基本上与把脚本放到外面的HTML中是一样的。看一个例子:
代码如下:
在这个例子中,列举了常见的获取DOM对象的方式:
1. 通过document.getElementById或者document.getElementByClassName之类的方法获取对象;
2. 通过document.documentElement或者document.rootElement获取document对象;
3. 通过事件参数evt.target获取产生事件的对象。这种方式的优点就是不使用id就可以获取到产生事件的对象。
其余的脚本基本和普通的DOM是一样的。
关于HTML5中SVG DOM及DOM操作是怎样的问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流