DOM树 vs DisplayList显示列表
两个很相似的东西，关于显示列表的教程看flash里吧，这里主要看看如何使用js操作DOM树
1.为DOM树添加节点，首先得创建一个
DOM的节点有2个比较常用的Element元素节点和TextNode文本节点。---Document文档节点这里不讨论。
Document对象的createElement()用来创建元素节点，参数是个标签名串。不区分大小写，最好用小写。
DOM的节点有2个比较常用的Element元素节点和TextNode文本节点。---Document文档节点这里不讨论。
Document对象的createElement()用来创建元素节点，参数是个标签名串。不区分大小写，最好用小写。
var elem = document.createElement("p");
这样产生一个节点在内存，但是还没有添加到Dom树中显示出来（这点很像一个显示对象没有被添加到显示列表里一样)
在显示出来之前可以修改一些属性初始化。
这样产生一个节点在内存，但是还没有添加到Dom树中显示出来（这点很像一个显示对象没有被添加到显示列表里一样)
在显示出来之前可以修改一些属性初始化。
这个元素是可以做容器的，也就是说可以塞进去子节点(这点比较下as3里的DisplayObjectContainer吧)
appendChild()插入一个孩子节点在内部的结尾。
1.)如
var elem = document.createElement("p");
var txtPara = document.createTextNode("我是一个段落文本!");
elem.appendChild(txtPara);
document.body.appendChild(elem);
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树的变化。
<!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]); //看这里
insertBefore(新孩子,参照物节点)
看看下面的代码
//document.body.appendChild(elem);
换成这个
document.body.insertBefore(elem,document.getElementsByTagName('button')[0]); //看这里
当然我们也可以替换一个节点为一个新节点：
方法:replaceChild(新节点,旧节点)
document.body.replaceChild(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>
结果如下:
<!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：，如需转载请自行联系原作者