W3C DOM操作之创建新节点
生活随笔
收集整理的這篇文章主要介紹了
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 οnclick="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 οnclick="insertImg()">插入圖片</button>
</body>
</html>
結果如下:
?
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 οnclick="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 οnclick="insertImg()">插入圖片</button>
</body>
</html>
結果如下:
?
轉載于:https://blog.51cto.com/xcf007/97614
總結
以上是生活随笔為你收集整理的W3C DOM操作之创建新节点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Visual C#3.0新特性概览
- 下一篇： 组合路由实验