W3C DOM操作之创建新节点

DOM树 vs  DisplayList显示列表
两个很相似的东西,关于显示列表的教程看flash里吧,这里主要看看如何使用js操作DOM树
1.为DOM树添加节点,首先得创建一个
DOM的节点有2个比较常用的Element元素节点和TextNode文本节点。---Document文档节点这里不讨论。
Document对象的createElement()用来创建元素节点,参数是个标签名串。不区分大小写,最好用小写。
var elem = document.createElement("p");
这样产生一个节点在内存,但是还没有添加到Dom树中显示出来(这点很像一个显示对象没有被添加到显示列表里一样)
在显示出来之前可以修改一些属性初始化。
这个元素是可以做容器的,也就是说可以塞进去子节点(这点比较下as3里的DisplayObjectContainer吧)
appendChild()插入一个孩子节点在内部的结尾。
1.)如 
var elem = document.createElement("p");
var txtPara = document.createTextNode("我是一个段落文本!");
elem.appendChild(txtPara);
document.body.appendChild(elem);
完整的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3C DOM 操作1</title>
<style type="text/css">
p
{
  border:1px solid #369;
}
</style>
<script type="text/javascript">
function insertPara()
{
  var elem = document.createElement("p");
  var txtPara = document.createTextNode("我是一个段落文本!");
  elem.appendChild(txtPara);
  document.body.appendChild(elem);  
}
</script>
</head>
<body>
  <button onclick="insertPara()">插入段落</button>
</body>
</html>
我们可以使用火狐的firebug插件观察DOM树的变化。
 
2.当然我们如果不想插入到结尾的话,还有另外的办法,插入指定子节点的前面。
insertBefore(新孩子,参照物节点)
看看下面的代码
//document.body.appendChild(elem);  
换成这个
document.body.insertBefore(elem,document.getElementsByTagName('button')[0]); //看这里
当然我们也可以替换一个节点为一个新节点:
方法:replaceChild(新节点,旧节点)
document.body.replaceChild(elem,document.getElementsByTagName('button')[0]);
可以设置下元素的属性:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3C DOM 操作1</title>
<style type="text/css">
p
{
  border:1px solid #369;
}
</style>
<script type="text/javascript">
function insertImg()
{
  var elem = document.createElement("img");
  elem.setAttribute("src","1.png");
  elem.setAttribute("width","100");
  document.body.appendChild(elem);  //看这里 
}
</script>
</head>
<body>
  <button onclick="insertImg()">插入图片</button>
</body>
</html>
结果如下:

本文转自 xcf007 51CTO博客,原文链接http://blog.51cto.com/xcf007/97614:,如需转载请自行联系原作者




上一篇:***php(codeigniter)中如何重定向


下一篇:什么是multipart/form-data请求