首先，我们知道DOM是什么？DOM（文档对象模型）是针对HTML和XML文档的一个API, 描述的是一个层次化的节点树。

一.节点层次

我们来深进一步理解一下为什么是树结构？每个节点都有自己的特点，数据和方法，它也会和其他的节点存在同级或者嵌套的关系，形成层级，而文档节点是每个文档根节点。最终形成树结构。下面我们就具体看看节点的类型：

1.Node类型

在javaScript中所有节点类型都继承自于Node类型，而节点类型一共有十二种，在Node类型用下面的12个常量表示

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

每个节点都有一个nodeType属性，它用来表示该节点的类型

//ie无效，ie没有公开Node类型的构造函数
if(someNode.nodeType == Node.ELEMENT_NODE){
  alter("Node is an element")
}
//解决浏览器兼容   与数字比较 
// 类如元素节点
if(someNode.nodeType == 1){
  alter("Node is an element")
}

1.nodeName 和nodeValue属性
这两个属性了解节点的具体信息。但是在使用这两个属性之前最好检测一下节点类型。
对于我们常用的元素节点它的 nodeNme 就是元素的标签名，nodeValue 始终为 null
2.节点关系

每个节点都有一个childNodes属性，它保存着NodeList对象，NodeList是一个类数组，有length属性。但是不是Array实例。类数组的每一项可以通过方括号或者item(index)方法
每个节点都有一个parentNode属性。该属性执行文档树中的父节点。
childNodes 列表里边的节点互为同胞节点。同胞节点之间常用属性： previousSibilng和 nextSibling
父节点与子节点的常用属性： firstChild 和 nextChild
3.操作节点
appendChild():用于向childNode列表添加节点

var appendNode = someNode.appendChild(newNode)

insertBefore() :向指定位置插入节点

//接受两个参数 参数1 ：要插入的节点，参数2 ：最为参照的节点
//1 .插入成为最后一个节点
var appendNode1 = someNode. insertBefore(newNode,null)
//2.插入成为第一个节点
var appendNode1 = someNode. insertBefore(newNode,someNode.firstChild)
//1 .插入最后一个节点前面
var appendNode1 = someNode. insertBefore(newNode,someNode.lastChild)

replaceChild(): 替换某个节点

//接受两个参数 参数1 ：替换的节点，参数2 ：被替换的节点
var replaceNode1 = someNode. replaceChild(newNode,someNode.firstChild)
var replaceNode1 = someNode.replaceChild(newNode,someNode.lastChild)

removeChild() : 移除某个节点

var removedNode = someNode.appendChild(someNode.lastChild)

cloneNode() : 复制某个节点接受一个布尔参数 true 表示深复制（复制该子节点以及子节点树），false 表示浅复制（只复制该节点）

var copyNode = myList.cloneNode(true)
alter(copyNode.childNode.length)

2.Document类型

Document 表示文档类型，我们常用的 document 对象是HTMLDocument的一个实例
Document 节点的特性：

nodeType的值为9
nodeName的值为 “#document”
nodeValue的值为null
parentNode的值为null
ownerDocument 值为null
其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment
1.文档子节点
两种方式：
documentElement属性，该属性始终指向HTML页面中的<html>
childNodes
document对象还有一个body对象，直接指向<body>元素
2.文档信息
document对象用来表示网页的信息的一些特有属性：
title ：<title>元素中的文本，显示在浏览器窗口的标题栏
url : 包含完整的地址栏url
domain ：页面的域名
referrer ：保存链接到当前页面的那个也买你的url

var  title = document.title
var  url = document.URL
var  domain = document.domain
var referrer = document.referrer

3.查找元素

<div id = "ID" class = "name" name = "name"><div>

var div = document.getElementById("ID")
//根据节点的name属性的值获取节点列表   HTMLDocument类型特有方
var div1 = document.getElementsByName("name")
//根据标签名获取节点列表   HTMLCollection 类数组对象
 var div2 = document.getElementsByTagName("name")

4.特殊集合

document.anchors 文档中带 name 属性的 <a>元素
document.applets：所有<applets>元素（不推荐使用，了解即可）
document forms：所有<form>元素
document.images：所有<img>元素
document.links：所有带href特性的<a>元素
5.文档写入
write(): 写入，接受一个字符串参数
writeln(): 接受，一个字符串参数在写入流的结尾加个 '\n'
open(): 打开网页输入流
close(): 关闭网页输入流

3.Element类型

Element 节点的特性：

nodeType的值为1
nodeName的值为元素标签名
nodeValue的值为null
parentNode的值为Document 或 Element
ownerDocument 值为null
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntryReference
1.nodeName 和 tagname 返回的都是元素的标签名

<div id = "ID" class = "name" name = "name"><div>

var div = document.getElementById("ID")
//true
alter(div.tagName == div.nodeName)

2.取得属性

<div id = "myId" class = "name" name = "name"><div>

var div = document.getElementById("myId")
//myId
alter(div.getAttribute("id"))  
alter(div.getAttribute("class"))

3.设置属性

<div id = "myId" class = "name" name = "name"><div>

var div = document.getElementById("myId")
//myId
alter(div.setAttribute("id","newId"))  
alter(div.getAttribute("class","ft"))

4.创建元素

var div = document.createElement("div")

4.Text类型

Text 节点的特性：

nodeType的值为3
nodeName的值为 "#text"
nodeValue的值为节点所包含的文本
parentNode的值为 Element
没有子节点
可以通过 nodeValue属性或者data属性访问/Text节点包含的文本
操作节点文本的方法：
appendData(text) ：将text添加到节点末尾
deleteData(offset，count) ：删除从offset位置开始的的count个字符。
insertData(offset，text) ：从offset位置开始插入text。
replaceData(offset，count，text) ：用text替换从从offset位置开始的的count个字符。
splitText(offset) ：从offset位置分割成两个文本节点
subStringData(offset，count) ：提取从offset开始的count个字符组成的文本

1.创建文本节点

var textNode = document.creteTextNode("hello world ")

5.Comment类型

注释在DOM中用Comment类型表示
Comment 节点的特性：

nodeType的值为8
nodeName的值为 ”#Comment“
nodeValue的值为注释的内容
parentNode的值为Document 或 Element
没有子节点

可以通过 nodeValue属性或者data属性访问注释节点包含的文本