什么是DOM
DOM = document + object +
model
document即文档，也就是从<html>到</html>的部分。
object即对象，对象有与之相关的属性、方法。如document.title这个属性代表了<title>Contents</title>；document.wrintln("someString")这个方法，就是在文档中写入一部分文本然后换行。
model是一种模型，是对整个网页内容的刻画。
通过DOM，javascript可以去访问和读取HTML页面，这个正是DOM的作用所在。
DOM如何映射HTML页面
DOM通过树这个数学模型刻画和映射HTML页面。
HTML是一种包含了各种标签的标记型语言，通过开标签如<p>表示一个结构的开始，通过闭标签如</p>表示一个结构的结束。可以把开标签看做盒子，将闭标签看做盒子的盖子：通过“盒子”来承载内容，或者什么都不装，作为一个空盒子。
这样，<p>HuJin</p>就可以看做一个p盒子，其中装了“HuJin”这个文本字符串。
当然，盒子里面也可以装盒子，想俄罗斯套娃一样。比如：
<div>
<p>HuJin</p>
</div>
这是一个div盒子，里面装了一个p盒子，p盒子里面装了“HuJin”这个文本字符串。
我们很容易从几乎所有的HTML里看出这种从属关系，因为它们都遵守了一定的缩进规定。一层层向外看，你会找到<html>和</html>这两个标签，它们没有缩进，是最外面的大盒子。换句话说，你拿走了这个叫做html的大盒子，所有里面的盒子都被你一起拿走了，所以html代表了这个html页面的内容。
不管把标签描述成盒子还是容器，我们发现，标签之间是具有某种关系的。家谱树可以很好的描述这种关系。
家谱树可以很好地表示从属关系，下面是一个例子：
<html>
<head>
<title>DOM</title>
</head>
<body>
<p>HuJin</p>
<ul>
<li>lovely</li>
<li>bonny</li>
</ul>
</body>
</html>
图中，蓝色线代表从属和包含关系，从属关系为从下到上，包含关系为从上到下。html这个标签包含了所有其他标签，本身不被任何标签所包含，所以它是这颗家谱树的根，也被称为根节点；head与body两个标签并没有从属关系，并且处在同一级(level)之上，他们是兄弟关系(sibling)，并成为兄弟节点；title从属于head标签，title是head的子节点(child)，而head是title的父节点(parent)。
这样我们就可以通过家谱树这种结构来很好地映射这整个文档。DOM正是通过这种映射方式，使得javascript可以去访问和操纵html页面。
最后这幅图表示html，DOM和javascript的关系。
分享到：
相关推荐
DOM树的理解[图],很好理解,呵呵,分享了!
4.DOM和BOM简介，适合基础前端的快速的记忆使用；很全面；
全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax 和客户端—服务器端通信为主题；第三部分“部分高级...
全书分为3个部分：第一部分“深入理解DOM脚本编程”，涉及W3CDOM规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax和客户端—服务器端通信为主题；第三部分“部分高级脚本...
关于dom和jquery对象理解
JavaScript是Web开发中最重要的一门语言，它强大而优美。无论是桌面开发，还是移动应用。JavaScript都是必须掌握的技术。W3C的DOM标准是开发Web应用的基石。...同时，还将对如何利用库提高开发效率有全面深入的理解。
DOM文档对象中文手册，帮助大家理解DOM!
dom4j官方api，虽然是英文版的，但内容简单，便于理解，是学习dom4j的必备资料
DOM编程详解(含HTML部分)DOM是Document Object ...简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
DOM4J介绍及应用.ppt 可用作讲课 课程的目标：1.理解什么是dom4j 2.dom4j的作用 3.怎么使用dom4j
全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax 和客户端—服务器端通信为主题；第三部分“部分高级...
详细的描述了DOM4J中对象的使用，更通过大量的例子来让你理解和掌握。
如何学习Dom,对DOM的理解和加深印象，DOM分布的去向，对DOM的深入血丝和加深印象，DOM的各个层次
全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax 和客户端—服务器端通信为主题；第三部分“部分高级...
本教程是为如下开发人员设计的，他们理解 XML 的基本概念，并且准备继续编写应用程序代码，使用文档对象模型（Document Object Model，DOM）来操作 XML。 这里假设读者熟悉诸如格式良好性和 XML 文档的类标签性质等...
第一部分 深入理解DOM脚本编程 第1章 遵循最佳实践 1.1 不唐突和渐进增强 1.2 让JavaScript运行起来 1.2.1 把行为从结构中分离出来 1.2.2 不要版本检测 1.2.3 通过平稳退化保证可访问...
这是虚拟DOM简单实现的代码，理解时可以参考http://blog.csdn.net/dear_mr/article/details/72566716
html DOM 节点的各种高度属性,避免开发理解上的误区
API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的...