客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序，脚本化Web页面的内容正是JavaScript存在的理由。
一个文档对象模型或者说DOM就是一个API，它定义了如何访问组成一个文档的对象。
动态文档内容
document.write()
只能在当前文档下在解析时使用wirte()向其输出HTML代码。（只能在顶层代码中调用，因为这些脚本的执行是解析过程的一部分）
如果把一个document.write()调用放入到一个事件句柄函数中，将会覆盖当和它所包含的脚本。所有的HTML中的内容会被覆盖。
把Script尽量放在HTML页面尾部，有助于性能提高，会优先下载前面的HTML页面内容，再下载Script运行。
也可以使用write()方法结合document对象的open()方法和close()方法，来在其他的窗口或帧中创建一个全新的文档，可以把文档
写入另一个窗口或帖，这在多窗口或多帧的网站中非常有用。
要创建一个新文档，首先需要调用document对象的open()方法，然后多次调用write()方法在文档中写入内容，最后调用document对象的close()方法以说明创建过程结束了，最后一步非常重要，如果忘记了关闭文档，浏览就不能制止它所显示的文档装载动画。
而且，浏览器可以将写入的HTML缓存起来，这样在调用close()地结束文档之前，缓存输出不会显示出来。
与必须的close()调用不同，open()方法的调用是可选的。如果调用一个已经闭关了的文档的write()方法，
JavaScript会隐式地打开一个新的HTML文档，就像已经调用过open()方法一样。这就解释了在同一文档中从事件句柄调用
document.write()时会发生什么，即JavaScript会打开一个新文档，但是在这个过程中，当前文档（以及它的内容，包括脚本、
事件句柄）就被丢弃了，作为一条经验，一个文档绝不应该从事件句柄中调用它自己的write()方法。
两点注意：
write()可以具有多个参数，用来一起向document中写入内容，相当于字符串拼接
存在writeln()
1 <body> 2 <input type="button" value="打开一个新窗口" id="bt1"/> 3 </body> 4 5 window.onload = function () { 6 var btn = document.getElementById("bt1"); 7 btn.onclick = function () { 8 //var o = window.open("test.aspx"); 9 var o = window.open(); 10 var doc = o.document; 11 doc.open(); 12 doc.write("this ");//会覆盖原有页面的内容 13 doc.write(" is"); 14 doc.write(" a"); 15 doc.write(" test"); 16 doc.close(); 17 18 } 19 }
Document属性：以上介绍的三个函数是DOM的遗留方法，以下为遗留属性：
bgColor
cookie
domain
lastModified
location
referrer(文档的URL，包含把浏览器带到当前文档的链接)
title 位于 title之间的文本
URL 装载文档的URL
1 console.log("document.bgColor:" + document.bgColor + " document.cookie:" + document.cookie + " "); 2 console.log("document.domain:" + document.domain + " document.lastModified:" + document.lastModified + " "); 3 console.log("document.location:" + document.location + " document.referrer:" + document.referrer + " "); 4 console.log("document.URL:" + document.URL); 5 下面为输出： 6 document.bgColor: 7 document.cookie: 8 document.domain:localhost 9 document.lastModified:03/25/2015 21:36:48 10 document.location:http://localhost:1344/default.aspx 11 document.referrer: 12 document.URL:http://localhost:1344/default.aspx"
命名的Document对象，
可以直接访问如：
document.form1.name2
1 <form name="form1"> 2 <input type="button" name="fbtn" value="打开一个新窗口" id="bt1"/> 3 </form> 4 document.form1.name2 5 window.onload = function () { 6 document.form1.fbtn.onclick = function () { 7 //var o = window.open("test.aspx"); 8 var o = window.open() 9 var doc = o.document; 10 doc.open(); 11 doc.write("this "); 12 doc.write(" is"); 13 doc.write(" a"); 14 doc.write(" test"); 15 doc.close(); 16 } 17 }
Document对象上的事件句柄
事件句柄是由HTML元素onclick和onmouseover等属性定义的。
以上介绍的都是0级DOM提供的API
以下介绍的为标准化的 W3C DOM
把文档表示为树
HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
可通过节点的 innerHTML 属性来访问文本节点的值。
DOM树结构表现为不同种类的Node对象的一棵树。Node接口定义了遍历和操作树的属性和方法。
注：DOM标准定义了接口，没有定义类。
Node对象的childNodes属性返回节点的孩子的一个列表，并用firstChild、lastChild、nextSibling、perviousSibling和parentNode
属性提供了遍历节点的树的一种方法。像appendChild()、removeChild()、replaceChild()和insertBefore这样的方法能够向一个
文档村中添加节点或者从一个文档树中移除节点。
节点的类型
文档树中的不同类型的节点都用节点的特定的子接口表示 。每个Node对象都有一个nodeType属性，它指定了节点是什么类型的。
将HTML DOM中几个容易常用的属性做下记录：
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
nodeName 属性含有某个节点的名称。
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
注释： nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
| 元素类型 | nodeTyep的值 |
接口
|
|---|---|---|
| 元素element | 1 |
Element
|
| 属性attr | 2 |
Attr
|
| 文本text | 3 |
Text
|
| 注释comments | 8 |
Comment
|
| 文档document | 9 |
Document
|
|
DocumentFragment
|
11
|
DocumentFragment
|
不同的接口定义一些不同的属性和方法。
注：DOM树概况的Node是一个Document对象。这个对象 的documentElement属性引用了一个Element对象，它代表了文档的根
元素。对不起HTML文档，这是<html>标记，它在文档中可以是显式的或者隐式的。在HTML文档中，通常对<body>元素比对<html>
元素更感兴趣，为了方便起见，可以使用document.body来引用这个元素。
属性
用Element接口的getArrtribute()方法，setArrtribute()方法和removeAttribute()方法可以
查询、设置、并删除一个元素的属性。
DOM HTML API
有两个标准版本 1级DOM 2级DOM 以及遗留的DOM 和 3级DOM 开发中
DOM一致性
在不同的WEB浏览器中，DOM的实现有不一样的一致程度（某些实现了，某些没有实现）
Document.implementation属性引用 一个DOMImplementation对象，它定义了名为hasFeature()方法，
可以用这个方法，（如果存在的话）查询一个实现是否支持特定的DOM特性（或者模块）
所有的DOM模块的接口
|
特性名
|
版本 |
描述
|
|
|
HTML
|
1.0
|
1级Core和HTML接口
|
|
|
XML
|
1.0
|
1级Core和XML接口
|
|
|
Core
|
2.0
|
2级Core接口
|
|
|
HTML
|
2.0
|
2级HTML接口
|
|
|
XML
|
2.0
|
2级XML接口
|
|
|
Views
|
2.0
|
AbstractView接口
|
|
|
StyleSheets
|
2.0
|
通用样式表遍历
|
|
|
CSS
|
2.0
|
CSS样式
|
|
|
CSS2
|
2.0
|
CSS2Properties接口
|
|
|
Events
|
2.0
|
事件处理基础结构
|
|
|
UIEvents
|
2.0
|
用户接口事件（加上Events和Views）
|
|
|
MouseEvents
|
2.0
|
Mouse事件
|
|
|
HTMLEvents
|
2.0
|
HTML事件
|
|
|
CSS3
|
|
CSS3Properties接口
|
|
独立于语言的DOM接口
可以和任务一种语言交互，使用的接口都是DOM接口，但是方法是根据语言和HTML DOM接口的规约相关。
可以在语言中通过定义相应的类，来实现这些接口，或者使用这些接口。
由于DOM标准定义了接口（这些接口都是为HTML标记、标记中的属性、事件等来定义的），而不是类，所以它没有定义任何构造函数方法，如果想创建一个新的Text对象，
把它插入文档，不能使用如下这样简单的代码
var t=new Text("this is a new text node");//没有构造函数支持。
因为DOM没有定义构造函数，所以DOM标准在Document接口中定义了大量有用的工厂方法。
因此要为文档创建一个新的Text节点，可以用下列代码
var t=document.createTextNode("this is a new text node");
除了工厂方法外
Document.implementation也定义了一些方法，可以通过Document.implementation访问它们。
代码：
1 <form name="form1"> 2 <input type="button" name="fbtn" value="创建一个节点" id="bt1" /> 3 </form> 4 window.onload = function () { 5 document.form1.fbtn.onclick = function () { 6 var t = document.createTextNode("文本节点"); 7 document.form1.appendChild(t); 8 } 9 }
使用Document段
DocumentFragment是一种特殊类型的节点，它自身不出现在文档中，只作为连续节点集合的临时窗口，
并允许将这些节点作为一个对象来操作。当把一个DocumentFragment插入文档时(用Node对象的appendChild、insertBefore、
replaceChild方法)，插入的不是DocumentFragment本身，而是它的所有子节点。
可以向其添加节点，然后一次性将它们全部加入到别的节点中当作子节点。或者其它什么的。
查询选定的文本
在所有现代浏览器中都可以查询选定的文本
window.getSelection
document.getSelection
document.selection
基于浏览器的不同
在火狐中，文本输入元素还定义了selectionStart和selectionEnd属性，可以用来查询或者设置选择的文本。
代码：
1 <form name="form1"> 2 <input type="button" name="fbtn" value="查询选定的文本" id="bt1" /> 3 这是一个可选的文本 4 </form> 5 6 window.onload = function () { 7 document.form1.fbtn.onclick = function () { 8 var s=""; 9 if (window.getSelection) 10 { 11 s = window.getSelection(); 12 } 13 else if (window.Selection) 14 { 15 s = window.Selection; 16 } 17 else if (document.getSelection) 18 { 19 s = document.getSelection(); 20 } 21 alert(s); 22 } 23 }
搜索文档元素
Document对象和所有文档元素都有数组属性all[]
这个数组表示文档中的所有元素或者元素中包含所有元素。
all[]数组有一个异常之处，即用tags()方法，可以以标记名获取一个元素数组
如：
var lists=document.all.tags("ul");
一些 DOM 对象方法
这里提供一些您将在本教程中学到的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |