DOM
一:DOM介绍:
DOM,文档对象模型,英文全称Document Object Model,是由W3C组织制定的一套操作文档的应用编程接口。
W3C:World Wide Web Consortium,万维网联盟,该组织主要工作是制定WEB技术的标准,其中DOM只是其中的一项标准,其他的标准还有CSS,XML,XHTML等等。
二:DOM分类:
主要分为Core DOM,HTML DOM等等,CoreDOM在所有的标记语言上的都可以使用,所以可以利用CoreDOM来操作HTML文档,当然我们也可以利用HTML DOM提供一些特殊的方法来操作HTML文档,但是要注意HTML DOM只能针对HTML文档使用,而不能用于其他的文档,比如XML 文档等。
三:了解HTML文档的一些基本概念:
任何一篇HTML文档被浏览器加载到内存中后,都会被解析为一棵内存数,这棵树由一个一个的节点构成。其中节点有12种类型,但主要有三种,分别是元素节点、属性节点、文本节点。
示例:
DOM Example
Hello
务必请掌握以下的节点分析图:
|
HTML:(元素节点) |
Head(元素节点) |
Body(元素节点) |
Title(元素节点) |
DOM Example (文本节点) |
Div(元素节点) |
Font(元素节点) |
属性节点 Style=”” |
文本节点 |
属性节点 Style=””
|
文本节点
|
DOM 里常见的属性:
1).getElementById: 根据ID获得某个元素
2).getElementsByTagName: 获得某指定标签名的所有元素,返回结果数组 或集合。
3 ). getElemetsByName: 获得指定名称的所有元素。返回结果数组或集合。
4).nodeName: 节点名称。
5).nodeValue: 节点值。
6).notestype: 节点类型,(元素节点:1、属性节点:2、文本节点:3) 。
7).ownerDocument :指向这个节点所指向的文档。
8).firstChild : 指向第一个子节点。
9).lastChild: 指向最后一个子节点。
10).childNodes: 获得所有的子节点。
11).previousSibling :指向前一个兄弟节点。
12).nextSibling:指向下一个兄弟节点。
13).parentNode: 指向父节点。
14).hasChildNodes: 当前节点是否有子节点。
15).attributes: 返回元素节点的所有的属性(返回的是一个数组)。
16).append: 附加.
17).appendChild(node): 将node添加到childNodes的末尾。
18).removeChild(node): 将node从childNodes中删除。
19).replaceChild(newNode,oldNode): 将chileNodes中的oldNode替换成newNode.
20).insertBefore(newNode,refNode): 在childNodes中的refNode之前插入newNode.
因为元素节点才有属性,所以只有元素节点才能调用
setAttribute()、geAttribute()、removeAttribute()
1).setAttribute : 为元素的指定属性赋值。
2).getAttribute: 获得元素的指定属性值。
3).setAttribute(属性名,属性值)。
4).removeAttribute: 删除元素的指定属性。
5).createElement: 创建元素节点。
6).createTextNode: 创建文本节点。
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/21228435/viewspace-580539/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/21228435/viewspace-580539/