文档对象模型（DOM）
文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持 Javascript的所有浏览器都支持DOM。本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。
DOM眼中的HTML文档：树
在DOM眼中，HTML跟XML一样是一种树形结构的文档，< html>是根（root）节点，< head>、< title>、< body>是< html>的子（children）节点，互相之间是兄弟（sibling）节点；< body>下面才是子节点< table>、< span>、< p>等等。如下图： 
这个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。
注: 在 FireFox 浏览器中, 您可以通过菜单"工具"->"DOM查看器"来浏览文档的DOM结构; IE 浏览器中您需要下载微软的 Internet Explorer Developer Toolbar 来查看 DOM, 在BrowserDevTool下载此工具.
HTML文档的节点
DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型：
接口
nodeType常量
nodeType值
备注
| Element |
Node.ELEMENT_NODE |
1 |
元素节点 |
| Text |
Node.TEXT_NODE |
3 |
文本节点 |
| Document |
Node.DOCUMENT_NODE |
9 |
document |
| Comment |
Node.COMMENT_NODE |
8 |
注释的文本 |
| DocumentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
document片断 |
| Attr |
Node.ATTRIBUTE_NODE |
2 |
节点属性 |
DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。Javascript操作HTML文档的时候，document即指向整个文档，< body>、< table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》，在此不赘述。
Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有：
方法
描述
| createAttribute() |
用指定的名字创建新的Attr节点。 |
| createComment() |
用指定的字符串创建新的Comment节点。 |
| createElement() |
用指定的标记名创建新的Element节点。 |
| createTextNode() |
用指定的文本创建新的TextNode节点。 |
| getElementById() |
返回文档中具有指定id属性的Element节点。 |
| getElementsByTagName() |
返回文档中具有指定标记名的所有Element节点。 |
对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如< table>标记的border属性。下面列出Element常用的属性：
属性 描述 tagName 元素的标记名称，比如< p>元素为P。HTML文档返回的tabName均为大写。
Element常用的方法：
方法
描述
| getAttribute() |
以字符串形式返回指定属性的值。 |
| getAttributeNode() |
以Attr节点的形式返回指定属性的值。 |
| getElementsByTabName() |
返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序。 |
| hasAttribute() |
如果该元素具有指定名字的属性，则返回true。 |
| removeAttribute() |
从元素中删除指定的属性。 |
| removeAttributeNode() |
从元素的属性列表中删除指定的Attr节点。 |
| setAttribute() |
把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性。 |
| setAttributeNode() |
把指定的Attr节点添加到该元素的属性列表中。 |
Attr对象代表文档元素的属性，有name、value等属性，可以通过Node接口的attributes属性或者调用Element接口的 getAttributeNode()方法来获取。不过，在大多数情况下，使用Element元素属性的最简单方法是getAttribute()和 setAttribute()两个方法，而不是Attr对象。
使用DOM操作HTML文档
Node对象定义了一系列属性和方法，来方便遍历整个文档。用parentNode属性和childNodes数组可以在文档树中上下移动；通过遍历childNodes数组或者使用firstChild和nextSibling属性进行循环操作，也可以使用lastChild和previousSibling进行逆向循环操作，也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、 replaceChild()方法可以改变一个节点的子节点从而改变文档树。
需要指出的是，childNodes的值实际上是一个NodeList对象。因此，可以通过遍历childNodes数组的每个元素，来枚举一个给定节点的所有子节点；通过递归，可以枚举树中的所有节点。下表列出了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() |
复制当前节点，或者复制当前节点以及它的所有子孙节点。 |
| hasChildNodes() |
如果当前节点拥有子节点，则将返回true。 |
| insertBefore() |
给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。 |
| removeChild() |
从文档树中删除并返回指定的子节点。 |
| replaceChild() |
从文档树中删除并返回指定的子节点，用另一个节点替换它。 |
接下来，让我们使用上述的DOM应用编程接口，来试着操作HTML文档。
首先举一个最简单的例子, 用 DOM 动态生成一个 Loading 的 IMG 并加入页面中, 当页面完全载入后, 就移除这个 IMG 对象.
<script>
var loadingImg = document.createElement("IMG");
loadingImg.src = "images/loading_xp.gif";
document.body.appendChild(loadingImg);
document.body.onload = function() {
document.body.removeChild(loadingImg);
};
</script>
JavaScript 解析和生成 XML
用 JS 解析和生成 XML 一般都是使用 DOMDocument 这个对象, 下面简单的列出其属性和方法:
属性:
| Attributes |
存储节点的属性列表 |
(只读) |
| childNodes |
存储节点的子节点列表 |
(只读) |
| dataType |
返回此节点的数据类型 |
| Definition |
以DTD或XML模式给出的节点的定义 |
(只读) |
| Doctype |
指定文档类型节点 |
(只读) |
| documentElement |
返回文档的根元素 |
(可读写) |
| firstChild |
返回当前节点的第一个子节点 |
(只读) |
| Implementation |
返回XMLDOMImplementation对象 |
| lastChild |
返回当前节点最后一个子节点 |
(只读) |
| nextSibling |
返回当前节点的下一个兄弟节点(只读) |
| nodeName |
返回节点的名字 |
(只读) |
| nodeType |
返回节点的类型 |
(只读) |
| nodeTypedValue |
存储节点值 |
(可读写) |
| nodeValue |
返回节点的文本 |
(可读写) |
| ownerDocument |
返回包含此节点的根文档 |
(只读) |
| parentNode |
返回父节点 |
(只读) |
| Parsed |
返回此节点及其子节点是否已经被解析 |
(只读) |
| Prefix |
返回名称空间前缀 |
(只读) |
| preserveWhiteSpace |
指定是否保留空白 |
(可读写) |
| previousSibling |
返回此节点的前一个兄弟节点 |
(只读) |
| Text |
返回此节点及其后代的文本内容 |
(可读写) |
| url 返回最近载入的XML文档的URL |
(只读) |
| Xml 返回节点及其后代的XML表示 |
(只读) |
方法:
| appendChild |
为当前节点添加一个新的子节点,放在最后的子节点后 |
| cloneNode |
返回当前节点的拷贝 |
| createAttribute |
创建新的属性 |
| createCDATASection |
创建包括给定数据的CDATA段 |
| createComment |
创建一个注释节点 |
| createDocumentFragment |
创建DocumentFragment对象 |
| createElement |
创建一个元素节点 |
| createEntityReference |
创建EntityReference对象 |
| createNode |
创建给定类型,名字和命名空间的节点 |
| createPorcessingInstruction |
创建操作指令节点 |
| createTextNode |
创建包括给定数据的文本节点 |
| getElementsByTagName |
返回指定名字的元素集合 |
| hasChildNodes |
返回当前节点是否有子节点 |
| insertBefore |
在指定节点前插入子节点 |
| Load |
导入指定位置的XML文档 |
| loadXML |
导入指定字符串的XML文档 |
| removeChild |
从子结点列表中删除指定的子节点 |
| replaceChild |
从子节点列表中替换指定的子节点 |
| Save |
把XML文件存到指定节点 |
| selectNodes |
对节点进行指定的匹配,并返回匹配节点列表 |
| selectSingleNode |
对节点进行指定的匹配,并返回第一个匹配节点 |
| transformNode |
使用指定的样式表对节点及其后代进行转换 |
| transformNodeToObject |
使用指定的样式表将节点及其后代转换为对象 |
分享到：
相关推荐
9. **XML基础和进阶**：XML用于数据交换，DTD和Schema定义结构，DOM、SAX和JAXP处理XML，工具如dom4j、JDOM简化操作。 10. **Web服务**：通过JAXWS2和SAAJ标准实现，WSDL和SOAP定义服务接口，CXF框架支持Web服务...
同时，随着JavaScript的发展，DOM编程也不断进化，如Shadow DOM、Web Components等新兴技术，都是进阶学习的方向。通过本书的学习，你将具备使用JavaScript操控网页内容的基础，为进一步的Web开发打下坚实基础。
本教程将引导初学者从零开始学习Ajax和PHP的集成应用。 **Ajax基础** Ajax的核心在于允许网页在不重新加载整个页面的情况下与服务器进行异步通信。它通过JavaScript实现，利用XMLHttpRequest对象与服务器进行数据...
2. **JSP和Servlet的整合**：第4、5、6、7、9章可能涉及JSP与Servlet的交互，讲解如何在JSP中调用Servlet，以及Servlet如何处理Ajax请求并返回数据。 3. **Ajax库的使用**：如jQuery、Prototype等，简化Ajax操作，...
1. ASP.NET AJAX框架：微软将AJAX技术整合到了ASP.NET中，提供了一个全面的开发框架，包括服务器控件、客户端库和服务扩展，使得开发者可以轻松地构建AJAX应用程序。 2. UpdatePanel：ASP.NET AJAX中的UpdatePanel...
* XML 进阶：DOM、SAX 和 JAXP、dom4j、JDOM 等工具、XQuery 和XQJ、基于 XML 的数据交换 五、Web Service * JAX_WS2、SAAJ 规范、WSDL 和 SOAP 协议、CXF框架、拦截器、CXF 整合 Spring 六、Java Web 编程 * ...
4. **jQuery操作**：jQuery是一个流行的JavaScript库，简化了DOM操作、事件处理和AJAX交互。在这个Demo中，jQuery可能被用来优化用户界面，如动态加载商品信息、响应式设计或者提供交互效果。 5. **架构设计**：...
【PHP+Ajax完全自学手册电子教材】是一本旨在帮助初学者和进阶者全面掌握PHP与Ajax技术的综合教程。该教材结合了理论与实践，深入浅出地讲解了这两个重要编程领域的核心概念和实际应用。 PHP（Hypertext ...
**SpringMVC + Hibernate4 + JQuery + Ajax + MySQL整合** 这个项目是一个综合性的Web开发...通过实际操作和学习，开发者不仅可以掌握各项技术的用法，还能了解如何将它们有效地组合在一起，构建高效、动态的Web应用。
12. **AJAX进阶**：学习使用Promise对象，理解jQuery的 deferred 和 promise API，处理异步操作的复杂逻辑。 13. **响应式设计**：结合jQuery与响应式框架，如Bootstrap，实现不同设备上的适配和优化。 14. **性能...
3. **Ajax**：了解异步JavaScript和XML，实现页面无刷新更新。 4. **JavaWeb基础**：学习Servlet、JSP、MVC设计模式、EL表达式、JavaBean、国际化、Cookie、HttpSession、JavaMail等核心技术。 5. **JavaWeb项目实战...
7. **Ajax**：学习Ajax原理和使用，XML和JSON数据传递，JavaScript解析XML和JSON。 8. **jQuery**：深入jQuery选择器、事件、属性、样式、UI、动画和Ajax框架。 9. **企业级开发**：包括Struts2框架应用、Hibernate...
通过本实例教程的学习，开发者不仅可以掌握ASP.NET和AJAX的基本概念，还能了解到如何在实际项目中整合这两种技术，创建出响应迅速、用户体验优秀的Web应用程序。同时，第五篇通常意味着系列教程的进阶部分，可能会...
- ScriptManager：它是所有Ajax功能的核心，负责管理页面上的Ajax请求，注册脚本，以及整合其他Ajax控件和功能。 - Timer：模拟定时器功能，可以在指定时间间隔内自动触发UpdatePanel的异步回发。 - ...
3. 学习AJAX，处理JSON和XML，实现异步验证和级联菜单。 4. 通过商城前后台案例，实践使用Bootstrap和EasyUI。 五阶段：企业级开发框架 这个阶段学习如何使用Maven、开源技术以及特定的开发框架： 1. Maven项目构建...
2. 处理JSON和XML数据响应。 **第八天：插件与扩展** 1. 了解jQuery插件的工作原理。 2. 学习如何使用和创建简单的jQuery插件。 **第九天：实用功能** 1. 使用`.each()`遍历集合。 2. 掌握`.data()`和`.serialize...
Maven是Java项目管理和构建工具，学习其配置 pom.xml 文件、依赖管理、生命周期和插件等，以便高效地组织和构建项目。 【学习阶段11-14】物流BOS系统、MyBatis、SpringMVC、SSM综合练习（58-76天）： 这些阶段涉及...
3. **JavaScript进阶**：深入理解DOM操作、事件处理、异步编程（Promise和async/await），以及可能涉及到的库和框架如jQuery。 4. **PHP7基础与进阶**：学习变量、控制结构、函数、类和对象，以及如何与MySQL数据库...
2. **$.ajax()**：异步数据请求，支持JSON, XML等多种格式，是AJAX操作的核心。 3. **$.each()**：遍历数组或对象，进行迭代操作。 4. **$.extend()**：合并两个或更多的对象属性，常用于扩展jQuery对象。 5. **$....