DOM总结一：HTML相关的DOM1级总结
目录
一、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区域和文档片段。