前言：哎...........请允许我先长叹一口气。接触web前端半年了，走过的冤枉路不少，为了让后面的小伙伴们都避免我走过的路，特地将这半年前端学习的经历和感想一并跟大家倾述倾述。好吧，我们开始吧。
最重要的一点提醒：学习技术真的不要一味求快。一定要记得欲速则不达的道理。现在我觉得个人的知识体系是需要个人努力一点点摸索和构建的而不是说你看过，使用过，了解过的便是你的了。其实不然，个人的知识体系必然是个人经验和摸索的结果而不是书上的。（或许是年少轻狂，我以前总认为自己的学习能力很快很好。其实不然，之前这半年为了学习前端，我拼命地去买书，跟着书上说的去做，当然能了解一些东西也能做出一点效果但这毕竟不是你的。因为你没有通过自身的处理。所以到最后，看似好像你很努力，也接触了很多东西，但最后你会发现你所有的东西都是零散的，都不是你的。你也无法运用自如。哎。。。。或许我就是个悲剧的例子。现在我开始意识到学习某项技术的最终的目的是为了更高效地去开发而不是学习知识了解东西的，所以我们要将自己学习思考过的东西经过自己的处理，构建起自己的知识体系。即使忘了某个知识点，我们也可以快速地查找下。切记，不要让你的知识点永远地存在在某本书上。个人想法而已......）
好的，现在我们开始讲解DOM的整个体系：
先来讲讲我对DOM的整个理解：DOM就是浏览器对HTML文件进行了对象化的处理，最终的结果就是我们可以在javascript中使用相对应的节点对象的属性或方法。
具体来说，整个HTML文档变成一颗节点树的结构，每个标签都是一个节点。常见的节点有三种元素节点，属性节点，文本节点。 例如<p id="only">hello world</p>这样的形式中， p就是元素节点。注意：由于属性节点和文本节点都是包含在p标签之内的。所以文本节点和属性节点都是p的字节点。我们可以通过这样的形式来直接访问到p中的文本节点的值hello world.代码：document.getElementsByTagName(‘p‘)[0].firstChild.nodeValue这样的形式去访问。但是属性节点我们无法直接访问到，必须使用某个元素节点的获取属性的方法。只能像下面这样的形式：document.getElementByTagName("p")[0].getAttribute(‘only‘)来获取。
为了开发的需求：下面我直接罗列出DOM中经常需要使用的属性或者方法。
第一部分：获取某个你想操作的元素对象
当然我们得从document对象出发去查找：
第一种：作为document对象的属性存在（由于历史上一开始DOM就是用来处理表单和图片的，所以当时我们可以直接引用document的属性的形式）
1.document.anchors(包含文档中所有带name属性的a元素)
2.document.applets（不做介绍）
3.document.forms (文档中所有的表单元素)
4.document.images (文档中所有的图片)
5.document.links (文档中所有带有href属性的a元素)
第二部分：查找元素
下面说说我们经常使用的document对象中的一些方法来获取你需要操作的元素
1. document.getElementById(‘XXX‘) 获取元素的ID属性为XXX的元素
2. document.getElementsByTagName(‘XXX‘) 获取标签为XXX的对象数组
3. document.getElemenetsByClassName(‘XXX‘) 获取类为XXX的对象数组
第三部分：通过位置来获取相关元素 （通过node节点相关的方法来实现的）
前面说过了，DOM就是将HTML文档转换成节点树的形式而且都变成了相对应的对象。
某一节点：子节点：childNodes 注：这是个对象数组
父节点 ：parentNode
下一兄弟节点：nextSibling
前一兄弟节点：previousSibling
第一个字节点：firstChild
最后一个子节点：lastChild
用法如下：document.getElementById(‘only‘).childNodes
原文：http://www.cnblogs.com/steven-wujianpeng/p/3602027.html