标签：
1、DOM:Document Object Model(文本对象模型)：
--D:文档-html文档或xml文档；
--O:对象-document对象的属性和方法；
--M:模型；
--DOM是针对xml(html)的基于树的API；
--DOM树：节点(node)的层次；
--DOM把一个文档表示为一颗家谱树（父、子、兄弟）；
--DOM定义了Node的接口以及许多节点类型来表示XML节点的多个方面。
2、节点(node):来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。
--1）元素节点；
--2）属性节点：元素的属性，可以直接通过属性的方式来操作；
--3）文本节点：是元素节点的子节点，其内容为文本。
3、获取元素节点：
--1）document.getElementById: 根据元素id属性获取对应的单个节点；
--2）document.getElementsByTagName:根据标签名获取指定节点名字的数据，该方法是node接口的方法，每一个节点都具有该方法；
--3）document.getElementsByName:根据节点的name属性获取符合条件的几点数组，但IE的实现方式与W3C标准有差别,在html文档中若某节点(li)没有name属性，则IE无法使用该方法获取指定的节点。
4、读写属性节点：
--直接使用元素节点来获取相应的属性节点并对其进行相应的操作：
alert(nameNode.value);
nameNode.value = "ABCD";
--通过元素节点的getAttributeNode方法来获取属性节点，然后再通过nodeValue来读写属性值；
5、获取元素节点的子节点（只有元素节点才有子节点）：
--childNodes属性可以获取全部子节点，但是因为可以通过元素节点的getElementsByTagName来获取指定的子节点，所以该方法不实用；
--firstChild属性获取第一个子节点；
--lastChild属性获取最后一个子节点。
6、获取文本节点：
--文本节点也是元素节点的子节点，可以直接通过元素节点来获取文本节点，然后通过文本节点的nodeValue属性来读写其内容。
7、三种类型的节点都具有以下三个属性：
--nodeType : 节点类型:1表示元素节点；2表示属性节点；3表示文本节点
--nodeName：节点名称
--nodeValue：节点值
--其中nodeType和nodeName两个属性是只读属性，而nodeValue可修改。
8、创建元素节点：
--1） createElement():按照给定的标签名创建一个新的元素节点；
--2）方法只有一个参数：被创建的元素节点的名字，为字符串类型；
--3）方法的返回值是一个指向新建节点的引用指针，是一个元素节点，nodeType为1；
--4）新元素节点不会自动添加到文档里，它只是存在于JavaScript上下文的对象。
9、创建文本节点：
--1） createTextNode():创建一个包含着给定文本的新文本节点；
--2）参数：新建文本节点所包含的文本字符串；
--3）方法的返回值是一个指向新建节点的引用指针，是一个文本节点，nodeType为3；
--4）新元素节点也不会自动添加到文档里
10、为元素节点添加子节点：
--1） appendChild(): var reference = element.appendChild(newChild);
--2） 指定子节点newChild将成为给定元素节点element的最后面一个子节点；
--3） 方法的返回值是一个指向新增子节点的引用指针。
11、节点的替换：
--1） replaceChild():把一个给定父元素里的一个子节点替换为另一个给定的子节点；
--2）var reference = element.replaceChild(newChild, oldChild);
--3）返回值是一个指向已被替换的子节点的引用指针；
--4）该改节点除了替换的功能以外还有移动的功能；
--5）改方法只能完成单向替换，若需要使用双向替换，需要自定义函数：
function replaceBoth(aNode, bNode){ //若两个节点相等，则直接返回 if(aNode == bNode){ return; } //获取两个节点的父节点 var aParent = aNode.parentNode; var bParent = bNode.parentNode; //若父节点都不为空 if(aParent && bParent){ //获取两个节点其中一个节点的克隆 var aNodeClone = aNode.cloneNode(true); //克隆的节点不包括原节点的响应函数和其他一些属性，因此需手动为其添加 aNodeClone.onclick = aNode.onclick; aNodeClone.index = aNode.index; //使用父节点的replaceChild()方法进行互换 bParent.replaceChild(aNodeClone, bNode); aParent.replaceChild(bNode, aNode); } }
12、删除节点：
--1） removeChild():从一个给定元素里删除一个子节点；
--2） var reference = element.removeChild(node);
--3）返回值是一个指向已被删除的节点的引用指针；
--4）某个节点被removeChild()方法删除时，这个节点所包含的所有子节点将同时被删除。
13、插入节点：
--1）insertBefore():将一个节点插入到一个给定元素节点的给定子节点的前面；
--2）var reference = element.insertBefore(newNode, targetNode);
--3）节点newNode将被插入到element中并出现在targetNode的前面；
--4）targetNode必须是元素节点element的子节点。
--5）可以使用insertBefore()方法实现insertAfter()方法：
function insertAfter(newNode, refNode){ //获取被插入节点的父节点 var parentNode = refNode.parentNode; //若存在父节点 if(parentNode){ //若被插入节点为父节点的最后一个子节点，则直接将新节点插入到父节点的最后一个子节点处 if(refNode == parentNode.lastChild){ parentNode.appendChild(newNode); } //否则，先获取被插入子节点的后一个兄弟节点，然后再在兄弟节点前面插入新节点 else{ var nextNode = refNode.nextSibling; parentNode.insertBefore(newNode, nextNode); } } }
14、innerHTML属性：
--1）浏览器几乎都支持该属性，但不是DOM标准的组成部分；
--2）innerHTML属性可以用来读写某给定元素里的HTML内容；
标签：
原文地址：http://www.cnblogs.com/tengtao93/p/5017332.html
