关于DOM，我们了解了可以用DOM操纵HTML的一些属性和样式，还可以为HTML元素绑定事件等等，那么接下来，我们将涉及到用DOM来动态的创建、删除HTML等一些操作，我的核心思路还是重实战，因此，代码示例是肯定少不了的。
不过在使用DOM动态操纵HTML元素之前，我们还是先了解一下DOM树，下面是我从网上找的一个DOM树的图片，它的截图如下：
如果大家学习过“树”这种数据结构，就会很好理解，一个父节点可以包含N个子节点，这些子节点可能是div、p等标签，也可以是属性，还可以是中间的文本信息，比如上面的em的子节点take your time就是一个典型的文本节点。
如果我们需要向HTML的DOM中添加新元素，那么我们必须首先创建该元素，然后向一个已有的元素中添加，听上去好像非常拗口。其实很好理解，就是我们可以用添加的方式来给DOM树引入新内容，Javascript给我们方法来创建该元素，直接看如下代码：
<html>
<body>
<div id = "demo"><p id = "tag">辛星</p></demo>
<script type="text/javascript">
//先创建一个元素
var p1 = document.createElement("p");
//然后创建一个文本节点
var msg = document.createTextNode("小倩");
//把该文本节点放入该元素中
p1.appendChild(msg);
//得到demo这个div
var demo = document.getElementById("demo");
//把p1这个标签插入到demo这个div里去
demo.appendChild(p1);
</script>
</body>
</html>
然后我们发现效果如下：
添加文本节点我们使用addChild，那么删除子节点，我们就用removeChild就可以了，其他的用法和前面一样的。
具体的函数大家查下手册把，我就不说了，不过感觉这个并不是很实用。。。。
2014年辛星解读Javascript之用DOM动态操纵HTML元素,布布扣,bubuko.com
时间： 2024-10-06 00:31:21