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入门经典(第四版)》)进一步学习中..........