- 元素节点：上图中、、
等都是元素节点，即标签。
- 文本节点:向用户展示的内容，如
- ... 中的JavaScript、DOM、CSS等文本。
- 属性节点:元素属性，如标签的链接属性href="http://www.baidu.com"。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DocumentFragment文档片段节点</title>
</head>
<body>
<!-- tip区域 -->
<div id="tip">test1</div>
<ul class="list-node">
<li>test2<li>
</ul>
<script>
var frag = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
li.innerHTML = "List item" + i;
frag.appendChild(li);
}
document.getElementById("list-node").appendChild(frag);
</script>
</body>
</html> (1)Element(元素节点)：
是组成文档树的重要部分，它表示了html、xml文档中的元素。通常元素因为有子元素、文本节点或者两者的结合，元素节点是唯一能够拥有属性的节点类型。
例子中的:html、header、meta、title、body、div、ul、li、script都属于Element(元素节点);
(2)Attr(属性节点)：
代表了元素中的属性，因为属性实际上是附属于元素的，因此属性节点不能被看做是元素的子节点。因而在DOM中属性没有被认为是文档树的一部分。换句话说，属性节点其实被看做是包含它的元素节点的一部分，它并不作为单独的一个节点在文档树中出现。
例子中的:lang、charset、id、class都属于Attr(属性节点);
(3)Text(文本节点)：
是只包含文本内容的节点，在xml中称为字符数据，它可以由更多的信息组成，也可以只包含空白。在文档树中元素的文本内容和属性的文本内容都是由文本节点来表示的。
例子中的:DocumentFragment文档片段节点、test1、test2、元素节点之后的空白区域都属于Text(文本节点);
(4)Comment(注释节点)：
表示注释的内容
例子中的:<!-- tip区域 -->都属于Comment(注释节点);
(5)Document(文档节点) ：
是文档树的根节点，它是文档中其他所有节点的父节点。要注意的是，文档节点并不是html、xml文档的根元素，因为在xml文档中，处理指令、注释等内容可以出现在根元素之外，所以我们在构造DOM树的时候，根元素并不适合作为根节点，因此就有了文档节点，而根元素是作为文档节点的子节点出现的。
例子中的：<!DOCTYPE html>、html作为Document(文档节点)的子节点出现;
(6)DocumentType(文档类型节点)：
每一个Document都有一个DocumentType属性，它的值或者是null，或者是DocumentType对象。比如声明文档类型时<!doctype html>就是文档类型节点。
例子中的：<!DOCTYPE html>就属于DocumentType(文档类型节点);
(7)DocumentFragment(文档片段节点)：
是轻量级的或最小的Document对象，它表示文档的一部分或者是一段，不属于文档树。不过它有一种特殊的行为，该行为使得它非常有用。比如：当请求把一个DocumentFragment节点插入到文档的时候，插入的不是DocumentFragment自身，而是它的所有的子孙节点。这使得DocumentFragment成了有用的占位符，暂时存放那些一次插入文档的节点，同时它还有利于实现文档的剪切、复制和粘贴等操作。
例子中的:var frag = document.createDocumentFragment(); 就属于DocumentFragment(文档片段节点);
html是一种标记语言，它告诉我们这个页面有什么内容，但行为交互是需要通过DOM操作来实现的。我们不要以为有两个尖括号就以为它是一个DOM了，html标签要通过浏览器解析才会变成DOM节点，当我们向地址栏传入一个url的时候，我们开始加载页面，就能看到内容，在这期间就有一个DOM节点构建的过程。节点是以树的形式组织的，当页面上所有的html都转换为节点以后，就叫做DOM树构建完毕，简称为domReady。
DOM ready比windows.onloaded早，domReady在dom树构建后就触发完成，windows.onloaded要在所有请求都结束后才触发完成
使用document.createElement("p")创建p元素，其实document.createElement("p")是HTMLParagraphElement的一个实例，而HTMLParagraphElement的父类是HTMLElement，HTMLElement的父类是Element，Element的父类是Node，Node的父类是EventTarget，EventTarget的父类是Function，Function的父类是Object。