您的位置：首页 > Web前端 > JavaScript

JS学习专辑（3）- DOM

2013-04-16 01:03 225 查看

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

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

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

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

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航