JS学习专辑（3）- DOM
BOM看过了，现在再来看一下DOM，这两个都是挺基础重要的东西。先简单的学习下DOM入个门先。首先肯定要知道什么是DOM：在HTML中，DOM通过 JavaScript，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目。
上次说到的document对象，每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。这个可以主要参考:HTML DOM Document 对象参考手册
但在学习的过程，主要还是需要对节点的操作有一些基础的掌握。DOM中在HTML中，每一个文档中的成分都是一个节点。节点中有等级关系。下面的图是HTML中的DOM树：
通过DOM，就可以访问到每个节点。比如通过getElementsByTagName()、getElementsByName()和getElementById()可查找整个 HTML 文档中的任何 HTML 元素。前两种种是可以返回一个所有TagName（Name）特性等于指定值的元素的NodeList，后一种直接返回id特性指定值的元素。下面就用了这三个方法（我偷懒的写在了一起）：
View Code
<body> <p>p1</p> <p>p2</p> <p>p3</p> <script type="text/javascript"> var Plist=document.getElementsByTagName("p"); alert(Plist.length); </script> </body> <div name="ByName"> TEST </div> <script> var MyElement=document.getElementsByName("ByName"); alert(MyElement.length); </script> <div id="ById"> TEST </div> <script> var MyElement=document.getElementById("ById"); alert(MyElement.innerHTML); </script>
上面那个是全文档搜索的，还有几个东西parentNode、firstChild以及lastChild这几个属性可以短距离的检索。
View Code
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
对上面的HTML代码来说，第一个td就是tr的firstChild，最后一个td是lastChild，每一个tr都是td的parentNode。
接下来是操作节点：
创建节点并加入HTML中就是用createElement()，createTextNode()，appendChild()这几个方法：
View Code
<body> <p>p1</p> <p>p2</p> <p>p3</p> <script type="text/javascript"> var P=document.createElement("p"); var text=document.createTextNode("p4"); P.appendChild(text); document.body.appendChild(P); </script> </body>
有创建就有乱七八糟的什么删除，替换，插入分别对应removeChild(),replaceChild()和insertBefore()这几个方法，用法和创建是差不多的。懒人表示就不写了。
貌似还有一个createDocumentFragment()这个东西是通过建立一个文档碎片节点（var P=document.createDocumentFragment()），再将要添加的新节点附加在此碎片节点上（P.appendChild(一堆节点)），然后一次性添加到document中（document.body.appendChild(P)）。这样就可以避免重复的调用。
上面都是一些DOM的基础，里面还有很多东西可以深入，下次继续再学。
