DOM编程中常用的方法和属性
2011-02-01 23:49
274 查看
文档对象模型DOM
在DOM中，HTML文档各个节点被视为各种类型的Node对象每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树
由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型
这里列出Node常用的几种节点类型
| 接口 | nodeType常量 | nodeType值 | 备注 |
| Element | Node.ELEMENT_NODE | 1 | 元素节点 |
| Attr | Node.ATTRIBUTE_NODE | 2 | 节点属性 |
| Text | Node.TEXT_NODE | 3 | 文本节点 |
| Comment | Node.COMMENT_NODE | 8 | 注释的文本 |
| Document | Node.DOCUMENT_NODE | 9 | document |
| DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 | document片段 |
JavaScript操作HTML文档的时候，document即指向整个文档，Element即为<body>、<table>等节点类型，Comment类型的节点则是指文档的注释
Document对象的大多数方法都是用于创建，可以插入文档中的各种类型的节点
这里列出了Document的常用方法
| 方法 | 描述 |
| createAttribute() | 用指定的名字创建新的Attr节点 |
| createComment() | 用指定的字符串创建新的Comment节点 |
| createElement() | 用指定的标记名创建新的Element节点 |
| createTextNode() | 用指定的文本创建新的TextNode节点 |
| getElementById() | 返回文档中具有指定id属性的Element节点 |
| getElementsByTagName() | 返回文档中具有指定标记名的所有Element节点 |
不过，在大多数情况下，使用Element元素属性的最简单方法是调用getAttribute()和setAttribute()两个方法，而不是Attr对象
这里列出了Element的常用方法
| 方法 | 描述 |
| getAttribute() | 以字符串形式返回指定属性的值 |
| getAttributeNode() | 以Attr节点的形式返回指定属性的值 |
| getElementsByTabName() | 返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序 |
| hasAttribute() | 如果该元素具有指定名字的属性，则返回true |
| removeAttribute() | 从元素中删除指定的属性 |
| removeAttributeNode() | 从元素的属性列表中删除指定的Attr节点 |
| setAttribute() | 把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性 |
| setAttributeNode() | 把指定的Attr节点添加到该元素的属性列表中 |
这里列出了Node对象的常用属性
| 属性 | 描述 |
| attributes | 如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性 |
| childNodes | 以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组 |
| firstChild | 以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null |
| lastChild | 以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null |
| nextSibling | 以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null |
| nodeName | 节点的名字，Element节点则代表Element的标记名称 |
| nodeType | 代表节点的类型。1为元素、2为属性、3为文本.... |
| nodeValue | 获取当前节点的值 |
| parentNode | 以Node的形式返回当前节点的父节点。如果没有父节点，则为null |
| previousSibling | 以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null |
| 方法 | 描述 |
| appendChild() | 通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点 |
| cloneNode() | 复制当前节点，或者复制当前节点以及它的所有子孙节点 |
| hasChildNodes() | 如果当前节点拥有子节点，则将返回true |
| insertBefore() | 给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置 |
| removeChild() | 从文档树中删除并返回指定的子节点 |
| replaceChild() | 从文档树中删除并返回指定的子节点，用另一个节点替换它 |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员——DOM编程中一些容易忘记的常用属性跟方法的应用。
- javaScript DOM编程常用的方法与属性
- HTML DOM （三）DOM的常用属性和方法
- C#网络编程之TcpListener与TcpClient类常用方法与属性(7)
- SVG DOM常用属性和方法介绍(1)
- jquery 中DOM操作的常用 方法、属性
- 常用的DOM属性、方法和集合
- 常用DOM方法与属性
- js基础之DOM中document对象的常用属性方法详解
- 5个常用的DOM方法 (js dom编程艺术之第3章)
- DOM访问表格子元素的常用属性和方法
- 常用DOM方法和属性 小结
- SVG DOM常用属性和方法介绍
- DOM初步认识和节点的常用属性方法
- JavaScript 节点操作Dom的常用属性和方法
- 转，DOM中常用属性及方法
- 《JavaScript DOM编程艺术》学习笔记之常用DOM方法属性
- DOM常用属性和方法
- SVG DOM常用属性和方法介绍(1)
- DOM的基础，属性以及常用方法