SVG学习笔记(2)-认识DOM

       W3C的DOM弥补了JavaScript、DHTML等的局限性,目前的浏览器也广泛的支持DOM,实现对页面内容的完全控制。

       DOM 的结构:DOM用对象来表示页面中的每个容器及其内容,这些对象以树状结构排列。dcoument对象是树根,每个文本标题、段落等元素是树的叶子。同数据结构中的树的概念一样,也有节点、父与子、兄弟这些概念

基本节点属性

  • nodeName  节点名称
  • nodeType  描述节点类型的一个整数。1表示正常的HTML标签,3表示文本节点,9表示文档节点
  • nodeValue  文本节点中包含的实际文本。对其他类型的节点无效
  • inneHTML 任意节点的HTML内容。(不属于W3C的DOM规范) 

节点关系属性

  • firstChild  是节点的第一个子对象。
  • lastChild  最后一个子对象。
  • childNodes  是包含某一个节点所有子节点的数组,可以配合使用一个循环来处理指定节点之下的所有节点
  • previousSibling  是当前节点之前的兄弟节点(同一层)
  • nextSibling  是当前节点之后的兄弟节点

文档方法

  • getElementById(id)  返回具有指定ID属性的元素
  • getElementsByTagName(tag)  返回具有指定标签名称的所有元素的一个数组,(*)通配符返回所有
  • createTextNode(text)  创建一个包含指定文本的新的文本节点,然后可以把它添加到文档中。
  • createElement(tag)  为指定标签创建一个新的HTML元素。可以通过改变子对象指定该元素的内容

节点方法

  • appendChild(new)  把指定的新节点附加在该对象所有现有节点之后
  • insertBefore(new,old)  把指定的新子节点插入到指定的原有子节点之前
  • replaceChild(new,old)  用新节点替换原有子节点
  • removeChild(node)  从对象的子节点集中删除一个子节点
  • hasChildNodes()  在对象拥有一个(或多个)子节点时,返回布尔值true;否则返回false
  • cloneNode()  为某个现有节点创建一个副本。

理解了这些属性与方法后,再看那些SVG绘图的例子,脑袋就清醒多了。当然还需要Javascript语言的帮忙。(参考资料《JAVASCRIPT入门经典(第四版)》)进一步学习中..........

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值