DOM
Posted iillegal
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM相关的知识，希望对你有一定的参考价值。
DOM
文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 html 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
在理解DOM眼中的HTML文档结构之前，应该对树状结构有所了解。直接位于一个节点之上的节点是该节点的父节点（parent）。直接位于一个节点之下的节点是该节点的子节点（children）。位于同一层次，具有相同父节点的节点是兄弟节点（sibling）。一个节点的下一个层次的节点集合是那个节点的后代（descendant）。一个节点的父节点、祖父节点及其他所有位于它之上的节点都是那个节点的祖先（ancestor）。
在DOM眼中，HTML是一种树状结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。
HTML文档的节点
由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。下表列出了Node常用的几种节点类型。
Node常用的几种节点类型
|
接 口 |
nodeType常量 |
nodeType值 |
备 注 |
|
Document |
Node.DOCUMENT_NODE |
9 |
document |
|
Element |
Node.ELEMENT_NODE |
1 |
元素节点 |
|
Text |
Node.TEXT_NODE |
3 |
文本节点 |
|
Attr |
Node.ATTRIBUTE_NODE |
2 |
节点属性 |
|
Comment |
Node.COMMENT_NODE |
8 |
注释文本 |
|
DocumentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
document片断 |
每个Node对象都有nodeType属性，它用来指定该节点的类型。例如，一个节点的nodeType属性等于Node.ELEMENT_NODE，则代表该节点为Element类型，可以将其作为Element对象，使用Element对象的属性和方法进行相关操作。
在DOM下，HTML文档的各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。
Node对象常用的属性
|
属 性 |
描 述 |
|
attributes |
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性 |
|
childNodes |
以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组 |
|
firstChild |
以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null |
|
lastChild |
以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null |
|
nextSibling |
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null |
|
nodeName |
节点的名字，Element节点则代表Element的标记名称 |
|
nodeType |
代表节点的类型 |
|
parentNode |
以Node的形式返回当前节点的父节点。如果没有父节点，则为null |
|
previousSibling |
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null |
Node对象常用的方法
|
方 法 |
描 述 |
|
appendChild() |
通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点 |
|
cloneNode() |
复制当前节点，或者复制当前节点以及它的所有子孙节点 要深度clone，要传一个参数true |
|
hasChildNodes() |
如果当前节点拥有子节点，则将返回true |
|
insertBefore() |
给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置 |
|
removeChild() |
从文档树中删除并返回指定的子节点 |
|
replaceChild() |
从文档树中删除并返回指定的子节点，用另一个节点替换它 |
DOM树的根节点是个Document对象， 用document我们可以得到该对象，Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中各种类型的节点。常用的Document方法如表4-12所示。
表4-12 Document常用的方法
|
方 法 |
描 述 |
|
createAttribute() |
用指定的名字创建新的Attr节点 |
|
createComment() |
用指定的字符串创建新的Comment节点 |
|
createElement() |
用指定的标记名创建新的Element节点 |
|
createTextNode() |
用指定的文本创建新的TextNode节点 |
|
getElementById() |
返回文档中具有指定id属性的Element节点 |
|
getElementsByTagName() |
返回文档中具有指定标记名的所有Element节点 |
|
getElementsByName() |
返回文档中具有指定标记名的所有Element节点 |
对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如<table>标记的border属性。
下表分别列出了Element常用的属性和方法。
Element常用的属性
|
属 性 |
描 述 |
|
tagName |
元素的标记名称，比如<p>元素为P。HTML文档返回的tabName均为大写 |
表4-14 Element常用的方法
|
方 法 |
描 述 |
|
getAttribute |
以字符串形式返回指定属性的值 |
|
getAttributeNode() |
以Attr节点的形式返回指定属性的值 |
|
getElementsByTagName() |
返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序 |
|
hasAttribute() |
如果该元素具有指定名字的属性，则返回true |
|
removeAttribute() |
从元素中删除指定的属性 |
|
removeAttributeNode() |
从元素的属性列表中删除指定的Attr节点 |
|
setAttribute() |
把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性 |
|
setAttributeNode() |
把指定的Attr节点添加到该元素的属性列表中 |
Attr对象代表文档元素的属性，有name、value等属性，可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()方法来获取。不过，在大多数情况下，使用Element元素属性的最简单方法是getAttribute()和setAttribute()两个方法，而不是Attr对象。
以上是关于DOM的主要内容，如果未能解决你的问题，请参考以下文章
DOM事件： DOM事件级别DOM事件流DOM事件模型DOM事件捕获过程自定义事件