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:,如需转载请自行联系原作者




相关文章
|
5月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
5月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
5月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
5月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
5月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
5月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
5月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
5月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
5月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
5月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)