概念扫盲DOM
DOM是 Document Object Model（文档对象模型）的缩写，是W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分：
这篇文章主要讲HTML DOM
HTML DOM
HTML DOM 是：HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
JavaScript DOM
前面讲过，DOM定义了访问HTML和XML文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
注意粗体字部分，DOM是中立于平台和语言的接口，也就是任意平台、任意语言中，都有相应的DOM接口。但在我们这篇文章中，我们主要的还是采用浏览器平台、JavaScript语言中的DOM接口来做阐述，这也是目前使用最频繁的接口了。
只是想提醒大家，不要以偏概全，认为只有JavaScript中的DOM才是真正的DOM。下文中，我们说的DOM接口也全部是JavaScript DOM和HTML DOM中的内容。
学习这部分需要大家对HTML、CSS、JS有基础的认识和了解。
DOM树简单的DOM树
我们之前说过一句话，也希望大家记住这句话：“有嵌套的地方就有父子关系。”
HTML中允许嵌套，并且允许多重嵌套，多种父子关系就形成了一棵树，我们叫它DOM树。
我们先来看一份简单的HTML代码：
<html><head><title>文档标题</title></head><body><a href="#">我的链接</a><h1>我的标题</h1></body></html>
它的DOM树是这样的：
节点关系
基本的节点关系有父子、同胞，衍生出来的有祖先—后代。父节点我们用parent表示，子节点用child，同胞用sibling。
我们将刚才的DOM树截取掉一部分，
这样就比较清楚了。
节点类型
文档的不同组成部分有不同的节点类型，共有12种，具体如下：
节点类型值节点类型描述子节点
1Element代表元素Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2Attr代表属性Text, EntityReference
3Text代表元素或属性中的文本内容。None
4CDATASection代表文档中的 CDATA 部分（不会由解析器解析的文本）。None
5EntityReference代表实体引用。Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6Entity代表实体。Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7ProcessingInstruction代表处理指令。None
8Comment代表注释。None
9Document代表整个文档（DOM 树的根节点）。Element, ProcessingInstruction, Comment, DocumentType
10DocumentType向为文档定义的实体提供接口None
11DocumentFragment代表轻量级的 Document 对象，能够容纳文档的某个部分Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12Notation代表 DTD 中声明的符号。None
其中，常用的是类型有Element，Attr，Text，Document等几种。节点类型可以通过以下语句来获得：
node.nodeType获取到的将是对应的节点类型值，注意这个值以字符串形式返回。
不同的节点类型的nodeName 和nodeValue返回值如下：
节点类型nodeName 返回nodeValue 返回
1Element元素名null
2Attr属性名称属性值
3Text#text节点的内容
4CDATASection#cdata-section节点的内容
5EntityReference实体引用名称null
6Entity实体名称null
7ProcessingInstructiontarget节点的内容
8Comment#comment注释文本
9Document#documentnull
10DocumentType文档类型名称null
11DocumentFragment#document 片段null
12Notation符号名称null
JavaScript DOM接口
获取DOM node传统方法
获取DOM节点的传统方法有三种，分别是getElementById, getElementsByTagName, getElementsByName。
getElementById属于document对象的方法，传入参数为节点的id值，返回该id对应的节点。由于id是独一无二的，所以返回值只有一个节点。如果文档中有多个同名id，不同浏览器处理结果可能不同，例如谷歌浏览器是以最后一个为准。例如：
<html> <head> <title>文档标题</title> </head> <body> <form action="get" id="target-form"> <input type="text" name="target-input" value="123" /> </form> </body> <script type="text/javascript"> var a = document.getElementById("target-form"); // form对应的节点 </script></html>切记不要丢了前面的document，否则会报错。
获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的
