DOM
小知识：在文档对象模型出现以前，创建前端web应用程序必须使用JavaApplet或ActiveX等复杂的组件才能完成。
1. DOM概述
文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及各个功能组件的标准接口。主要包括以下内容：
● 核心JavaScript语言参考(数据类型、运算符、基本语句、函数等)；
● 与数据类型有关的对象（String,Math,Array,Date等数据类型）；
● 浏览器对象（Window, Location,Histroy, Navigator）；
● 文档对象（document,images,form等）；
小知识：JavaScript使用两种对象模型：浏览器对象模型（BOM）和文档对象模型（DOM），前者提供了访问浏览器的各个功能组件，如浏览器对象本身，浏览器历史等操作方法；后者提供了访问浏览器窗口内容，如文档，图片等各种HTML元素以及这些元素包含的文档操作方法。
2.基本的文档对象模型
基本的文档对象模型提供了一个非常基础的文档对象层次结构，在这个层次结构中，Window位于对象层次的最高级，包含全部的Document对象，同时具有其他对象所没有的属性与方法，Document对象即为浏览器载入的HTML页面，其上的链接和表单单元元素都作为有属性、方法和事件处理程序的元素对象来对待。
3. W3C DOM
DOM规范必须适应HTML的已知结构，同时适应XML的未知结构，DOM的概念主要有以下几个方面：
● 核心DOM：指定类属类型，将带有标记的文档看成树状结构并据此对文档进行相关操作。
● DOM事件：使用者所熟悉的键盘事件，鼠标事件，同时还包括DOM特有的事件，当操作文档对象中的各元素对象时发生。
●HTML DOM：提供用于操作HTML文档的以及类似于JavaScript对象模型语法的功能部件，在核心DOM的基础上支持对所有HTML元素进行操作。
●XML DOM:提供操作XML文档的特殊方法。
●DOM CSS:提供了脚本编程实现CSS的接口。
4.文档对象的产生过程
当载入HTML文档时，浏览器解释其代码，当遇到自身支持的HTML元素对象对应的标记时，就按照HTML文档载入的顺序在内存中创建这些对象，而不管JavaScript脚本是否真正的运行这些对象。对象创建后，浏览器为这些对象提供专供JavaScript脚本使用的可选属性，方法和处理程序。通过这些属性、方法和处理程序，Web开发人员可以动态操作HTML文档内容。
小知识：文档对象模型具有层次结构，由于JavaScript是基于对象的编程语言，而不是面向对象的编程语言，所以在JavaScript编程中必须考虑类、实例及继承等术语，只需要充分理解不同浏览器之间文档对象的层次结构，就可以利用JavaScript准确定位并操作该对象。
5.DOM对象的节点
在W3C规范中，每个容器、元素或文本块都看做一个节点；当一个容器包含另外一个容器时，对应的节点之间有父子关系。DOM中定义了HTML文档中6中相关的节点类型。
| 节点类型数值 |
节点类型 |
附加说明 |
实例 |
| 1 |
元素（Element） |
HTML标记元素 |
|
| 2 |
属性（Attribute） |
HTML标记元素的属性 |
Color=”red” |
| 3 |
文本（Text） |
HTML标记文本段 |
Hello World |
| 4 |
注释（Comment） |
HTML注释段 |
|
| 5 |
文档（Document） |
HTML文档根对象 |
|
| 6 |
文档类型 |
文档类型 |
小知识：DOM节点数中的节点有元素节点、文本节点和属性节点三种不同的节点类型，
1. 元素节点
在HTML文档中，各HTML元素如
、、
- 等构成文档结构模型的一个元素对象。在节点树中，每个元素对象又构成一个节点。元素对象可以包含其他的元素。
2. 文本节点
在节点树中，元素节点构成树的枝条，而文本节点构成树的叶子。文本节点总是包含在元素节点的内部，但是并非所有的元素节点都包含或直接包含文本节点。
3. 属性节点
HTML文档中的元素都或多或少的有一些属性，既便于准确、具体的描述相应的元素，又便于进行进一步操作。
小知识：并非所有的元素都包含属性，但所有的属性都必须在元素的内部。
6.DOM对象的属性
属性一般定义对象的当前设置，在DOM模型中，文档对象有许多初始属性，如果标记没有现显式的设置属性，浏览器使用默认值来给标记的属性值和相应的JavaScript文本属性赋值。DOM文档对象主要有以下重要属性：
| 节点属性 |
说明 |
| nodeName |
返回当前节点的名字 |
| nodeType |
返回与节点类型对应的值 |
| nodue |
返回当前节点的值 |
| parentNode |
应用当前节点的父节点，如果存在的话 |
| childNodes |
访问当前节点的子节点的集合，如果存在的话 |
| firstChild |
对标记的子节点集合中的第一个子节点的引用。如果存在的话 |
| lastChild |
对标记的子节点集合中的最后一个子节点的引用，如果存在的话 |
| previousSibling |
对同属一个父节点的前一个兄弟节点的应用 |
| nextSibling |
对同属一个父节点的下一个兄弟节点的引用 |
| Attributes |
返回当前节点属性的列表 |
| owenerDocument |
指向包含节点的HTML document对象 |
小知识：firstChild和lastChild指向当前标记的第一个子节点和最后一个子节点，但是大多数情况下使用childNodes集合，使用循环遍历子节点，如果没有子节点。则childNodes为0。
6.DOM的基本操作
对DOM的基本操作分为，对DOM对象的操作、属性的操作、节点的操作。
1. 对象的基本操作
DOM模型提供了两种方法用于获取对象，即getElementById()和getElementByTagName()两种方法。
●getElementById()用于返回指定id属性值的元素节点对象。对应着文档里的一个特定的元素节点。
●getElementByTagName()用于返回文档中指定tag标签名称的元素对象数组，与上一个方法不同，该方法返回的是具有相同标签的对喜爱那个数组
2.对属性的操作
DOM模型提供了相应的方法，来对获取目标对象的属性值、添加目标对象的属性值以及删除特定的属性值。
| 方法 |
说明 |
| getAttribute(attribute) |
用于返回目标对象指定属性名称的属性值 |
| setAttribute(attribute, value) |
用于修改任意元素指定属性名称的属性值 |
| removeAttribute(attribute) |
用于删除任意节点的属性 |
3.对节点的操作
由于节点具有易于操作，对象明确等特点，DOM提供了非常丰富的节点处理方法来对节点进行操作，JavaScript的节点有对象节点和文本节点和属性节点
| 操作类型 |
方法原型 |
附加说明 |
| 生成节点 |
createElement(tagName) |
创建由tagName指定类型的标记 |
| createTextNode(string) |
创建包含字符串的文本节点 |
|
| createAttribute(name) |
创建由name指定的属性 |
|
| createComment(string) |
创建由string指定的文本注释 |
|
| 插入生成节点 |
appendChild(newChild) |
添加子节点newChild到目标节点上 |
| insertBefore(newChild,target) |
将新节点newChild添加到目标节点前 |
|
| 复制节点 |
cloneNode(bool) |
复制自身， bool指定是否复制子节点 |
| 删除替换节点 |
removeChild(childName) |
删除由childName指定的节点 |
| replaceChild(newchild,old) |
新节点替换旧节点 |
|
| 文本节点操作 |
insertData(offset, String) |
从offset指定的位置插入string |
| appendData(string) |
将string插入到文本节点的末尾处 |
|
| deleteDate(offset,count) |
从offset起删除count个字符 |
|
| replaceData(off,count,string) |
从off将count个字符用string替代 |
|
| splitData(offset) |
从offset起将文本节点分成两个节点 |
|
| substring(offset,count) |
返回由offset起的count个节点 |