JS学习专辑（3） DOM

　　BOM看过了，现在再来看一下DOM，这两个都是挺基础重要的东西。先简单的学习下DOM入个门先。首先肯定要知道什么是DOM：在HTML中，DOM通过 JavaScript，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目。

　　上次说到的document对象，每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。这个可以主要参考:HTML DOM Document 对象参考手册

　　但在学习的过程，主要还是需要对节点的操作有一些基础的掌握。DOM中在HTML中，每一个文档中的成分都是一个节点。节点中有等级关系。下面的图是HTML中的DOM树：

DOM HTML 树

　　通过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的基础，里面还有很多东西可以深入，下次继续再学。