DOM总结一：HTML相关的DOM1级总结

一、DOM概念

二、节点层次

三、Node类型

一、DOM概念

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM将HTML页面描绘成一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

1998年DOM1级规范称为W3C的推荐标准。DOM1级为基本文档结构及查询提供了接口，DOM1级的目标主要是映射文档的结构。

IE、Firefox、Safari、Chrome和Opera都非常完善地实现了DOM。

二、节点层次

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

节点分为几种不同的类型，每种类型分别标识文档中不同的信息及标记。

每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。

所有页面标记表现为一个以特定节点为根节点的树形结构，文档节点就是每个文档的根节点。

文档节点只有一个子节点，即<html>元素，称为文档元素，文档元素是文档的最外层元素。

三、Node类型

DOM1级定义了一个Node接口，该接口在JavaScript中是作为Node类型实现的。

JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

1、属性

nodeType —— 用于表明节点的类型

节点类型由Node类型中定义的下列12个数值常量来表示：

Node.ELEMENT_NODE(1)

Node.ATTRIBUTE_NODE(2)

Node.TEXT_NODE(3)

Node.CDATA_SELECTION_NODE(4)

Node.ENTITY_REFERENCE_NODE(5)

Node.PROCESSING_INSTRUCTION_NODE(7)

Node.COMMENT_NODE(8)

Node.DOCUMENT_NODE(9)

Node.DOCUMENT_TYPE_NODE(10)

Node.DOCUMENT_FRAGMENT_NODE(11)

Node.NOTATION_NODE(12)

nodeName —— 节点名
nodeValue —— 节点值
childNodes —— 返回保存子节点的NodeList对象
parentNode —— 指向父节点
firstChild —— 指向第一个子节点
lastChild —— 指向最后一个子节点
previousSibling —— 指向前一个兄弟节点
nextSibling —— 指向后一个兄弟节点
ownerDocument —— 指向文档节点

2、方法

hasChildNodes() —— 是否包含子节点
appendChild(newNode) —— 在子节点末尾添加新节点
insertBefore(newNode, someNode) —— 在某个子节点前添加一个新的子节点
replaceChild(newNode, oldNode) —— 使用新节点替换旧节点
removeChild(someNode) —— 删除某个节点
cloneNode() | cloneNode(true) —— 浅复制，即只复制节点本身 | 深复制，即复制节点及其整个子节点树
normalize() —— 删除空文本节点或者合并相邻的文本节点

四、Document类型

JavaScript通过Document类型表示文档。

在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。

而且，document对象是window对象的一个属性

1、Document节点的特征

nodeType的值是9
nodeName的值为"#document"
nodeValue的值为null
parentNode的值为null
ownerDocument的值为null

2、属性

documentElement —— 指向<html>元素，即文档元素
body —— 指向<body>元素
doctype —— 指向文档类型标签
title —— 包含<title>元素中的文本
URL —— 包含页面完整的URL
domain —— 包含页面的域名
referrer —— 保存着链接到当前页面的那个页面的URL
anchors —— 包含文档中所有带有name特性的<a>元素
forms —— 包含文档中所有的<form>元素
images —— 包含文档中所有的<img>元素
links —— 包含文档中所有带href特性的<a>元素

3、方法

getElementById() —— 使用元素id获取该元素对象
getElementsByTagName() —— 返回对应标签名元素组成的HTMLCollection对象
getElementsByName() —— 返回对应name特性的元素组成的NodeList对象
implementation.hasFeature(功能，版本号） —— 监测浏览器支持的功能和版本
write() | writeln() —— 写入文档
open() —— 打开网页的输出流
close() —— 关闭网页的输出流
createElement() —— 创建元素节点
createTextNode() —— 创建文本节点
createComment() —— 创建注释节点
createCDataSection() —— 创建CDATASection节点
createDocumentFragment() —— 创建文档片段节点
createAttribute() —— 创建特性节点

五、Element类型

所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。

HTML类型直接继承自Element并添加了一些属性。

Element类型提供了对元素标签名、子节点及特性的访问。

1、ELEMENT节点的特征

nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document或Element

2、属性

只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中。

style特性通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过style属性来访问它则会返回一个对象。

onclick特性通过getAttribute()访问时，返回的onclick特性值总包含的是相应代码的字符串，而通过onclick属性来访问它则返回相应的函数

id —— 元素在文档中的唯一标识符
title —— 有关元素的附加说明信息，一般通过工具提示条显示出来
className —— 与元素的class特性对应，即为元素指定的css类
style —— 与元素的style特性对应
onclick —— 与元素的onclick特性对应
attributes ‘—— 保存元素的各个特性

attributes属性的各个方法：

getNamedItem(name) —— 返回nodeName属性等于name的节点

removeNamedItem(name) —— 从列表移除nodeName属性等于name的节点

setNamedItem(node) —— 向列表中添加节点，以节点的nodeName属性为索引

item(pos) —— 返回位于数字pos位置处的节点

3、方法

setAttribute(attr, value) —— 设置元素的特性
getAttribute(att) —— 获取元素的特性
removeAttribute(attr) —— 移除元素的特性
setAttributeNode() —— 添加特性节点
getAttributeNode() —— 获取特性节点

六、Text类型

文本节点由Text类型表示，包含的是可以按照字面解释的纯文本内容。

纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。

1、Text节点的特征

nodeType的值为3
nodeName的值为"#text"
nodeValue的值为节点所包含的文本
parentNode是一个Element
不支持（没有）子节点

2、属性

data —— 可以通过nodeValue属性或data属性访问文本节点中包含的文本
length —— 文本节点中字符的数目

3、方法

appendData(text) —— 将text添加到节点的末尾
deleteData(offset，count) —— 从offset指定的位置开始删除count个字符
insertData(offset，text) —— 在offset指定的位置插入text
replaceData(offset, count, text) —— 用text替换从offset指定的位置开始到offset+count为止处的文本
splitText(offset) —— 从offset指定的位置将当前文本节点分成两个文本节点
substringData(offset, count) —— 提取从offset指定的位置开始到offset+count为止处的字符串

七、Comment类型

注释在DOM中是通过Comment类型来表示的。

1、Comment节点的特征

nodeType的值为8
nodeName的值为"#comment"
nodeValue的值是注释的内容
parentNode可能是Document或Element
不支持（没有）子节点

2、属性和方法

Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。

与Text类型相似，也可以通过nodeValue或data属性来取得注释的内容。

八、CDATASection类型

CDATASection类型只针对基于XML的文档，表示的是CDATA区域。

1、CDATASection节点的特征

nodeType的值为4
nodeName的值为"#cdata-section"
nodeValue的值是CDATA区域中的内容
parentNode可能是Document或Element
不支持（没有）子节点

2、属性和方法

CDATASection类型继承自Text类型，因此拥有除splitText()之外的所有字符串操作方法。

九、DocumentType类型

DocumentType包含着与文档的doctype有关的所有信息

1、DocumentType节点的特征

nodeType的值为10
nodeName的值为doctype的名称
nodeValue的值为null
parentNode是Document
不支持（没有）子节点

2、属性

name —— 表示文档类型的名称

十、DocumentFragment类型

DOM规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。

可以将文档片段作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。

1、DocumentFragment节点的特征

nodeType的值为11
nodeName的值为"#document-fragment"
nodeValue的值为null
parentNode的值为null
子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference

十一、Attr类型

元素的特性在DOM中以Attr类型来表示。

尽管Attr节点也是节点，但它们却不被认为是DOM文档树的一部分。

1、Attr节点的特征

nodeType的值为2
nodeName的值是特性的名称
nodeValue的值是特性的值
parentNode的值为null
在HTML中不支持（没有）子节点

2、属性

name —— 特性名称
value —— 特性的值
specified —— 用于区别特性是在代码中指定的，还是默认的

十二、表格DOM

1、<table>元素的属性和方法

caption —— 保存着对<caption>元素（如果有）的指针
tBodies —— 是一个<tbody>元素的HTMLCollection
tFoot —— 保存着对<tfoot>元素（如果有）的指针
tHead —— 保存着对<thead>元素（如果有）的指针
rows —— 是一个表格中所有行的HTMLCollection
createTHead() —— 创建<thead>元素，将其放到表格中，返回引用
createTFoot() —— 创建<tfoot>元素，将其放到表格中，返回引用
createCaption() —— 创建<caption>元素，将其放到表格中，返回引用
deleteTHead() —— 删除<thead>元素
deleteTFoot() —— 删除<tfoot>元素
deleteCaption() —— 删除<caption>元素
deleteRow(pos) —— 删除指定位置的行
insertRow(pos) —— 向row集合中的指定位置插入一行

2、<tbody>元素的属性和方法

rows —— 保存着<tbody>元素中行的HTMLCollection
deleteRow(pos) —— 删除指定位置的行
insertRow(pos) —— 向rows集合中的指定位置插入一行，返回对新插入行的引用

3、<tr>元素的属性和方法

cells —— 保存着<tr>元素中单元格的HTMLCollection
deleteCell(pos) —— 删除指定位置的单元格
insertCell(pos) —— 向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用

十三、总结中的小结

最基本的节点类型是Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。

Document类型表示整个文档，是一组分层节点的根节点。在JavaScript中，document对象是Document的一个实例。使用document，有很多中方式可以查询和取得节点。

Element节点表示文档中的所有HTML或XML元素，可以用来操作这些元素的内容和特性。

另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA区域和文档片段。