基于JavaScript創(chuàng)建動態(tài)Dom

更新時間：2015年12月08日 14:30:53 投稿：mrr

這篇文章主要介紹了基于JavaScript創(chuàng)建動態(tài)Dom的相關(guān)資料,需要的朋友可以參考下

動態(tài)腳本

我們在頁面中使用<script>元素就可以向頁面中插入javascript代碼。有兩種方式：一種是通過src屬性引用外部的JS文件，一種是用這個元素來包含一段js代碼。所謂的動態(tài)腳本，就是指這個腳本在頁面加載時不存在，在將來的某一個時刻通過修改DOM來動態(tài)的添加腳本。與操作html元素一樣，創(chuàng)建動態(tài)腳本也有兩種方式：插入外部文件和直接插入JavaScript代碼。

動態(tài)加載的外部JavaScript代碼可以立刻被執(zhí)行，例如下面的代碼：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "demo.js";
document.body.appendChild(script);

從上圖的結(jié)果中可以看到，上面代碼在<body>元素中生成了一個<script>節(jié)點：

<script type="text/javascript" src="demo.js"></script>

需要注意的是，在執(zhí)行最后一行代碼把<script>添加到頁面之前，是不會下載外部腳本文件的。

另一種指定JavaScript代碼的方式是行內(nèi)方式，例如：

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function fn1(){alert('hello wolrd!')} fn1();"));
document.body.appendChild(script);

上面的代碼會在<body>元素中插入一段JavaScript代碼：

<script type="text/javascript">
function fn1(){alert('hello wolrd!')} fn1();
</script>

執(zhí)行上面的代碼后會彈出提示框，顯示“hello world!”文本。

在Firefox、Safari、Chrome和Opera瀏覽器中，上面操作的DOM代碼是可以正常執(zhí)行的。但是在舊版本的IE瀏覽器中，這些代碼會發(fā)生錯誤。舊版本的IE瀏覽器將<script>元素看做特殊元素，不允許DOM訪問它的子節(jié)點。不過，可以使用<script>元素的text屬性來指定JavaScript代碼，例如：

var script = document.createElement("script");
script.type = "text/javascript";
script.text("function fn1(){alert('hello wolrd!')} fn1();");
document.body.appendChild(script);

像上面這樣修改代碼之后，在IE、Firefox、Safari3.0、Chrome和Opera瀏覽器中都可以運行。Safari3.0之前的瀏覽器雖然不能正確的執(zhí)行text屬性，但是可以使用文本節(jié)點來指定代碼。所以如果需要支持舊版本的瀏覽器，可以像下面這樣書寫代碼：

var script = document.createElement("script");
script.type = "text/javascript";
var code = "function fn1(){alert('hello wolrd!')} fn1();";
try{
script.appendChild(document.createTextNode(code));
}catch(e){
script.text = code;
}

上面的代碼首先嘗試標(biāo)準(zhǔn)的DOM文本節(jié)點方法，因為除了舊版本的IE瀏覽器之外，其它瀏覽器都支持這種方式。如果這行代碼拋出異常，那么說明是舊版本的IE瀏覽器，那就必須使用text屬性。

我們可以將動態(tài)添加腳本的代碼封裝到一個函數(shù)中，通過不同的參數(shù)來動態(tài)加載不同的腳本。

function loadScript(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(e){
script.text = code;
}
document.body.appendChild(script);
}

要調(diào)用這個函數(shù)，可以像下面的樣子：

loadScript("function fn1(){alert('hello wolrd!')}");

這種方式加載的代碼會在全局作用域中執(zhí)行，而且當(dāng)腳本執(zhí)行后立刻可用。實際上，這樣執(zhí)行代碼與在全局作用域中把相同的字符串傳遞給eval()函數(shù)是一樣的。

動態(tài)樣式

通常可以將CSS樣式包含到HTML頁面中的元素有兩個：一個是<link>元素，用于包含來自外部的文件；另一個是<style>元素，用于指定嵌入樣式。與動態(tài)腳本類似，動態(tài)樣式是指在頁面加載時并不存在的樣式。動態(tài)樣式是在頁面加載完成后動態(tài)添加到頁面中的腳本。例如下面的例子：

var link = document.createElement("link");
link.rel = "stylesheet"
link.type = "text/css";
link.href = "styles.css";
var head = document.getElementsByTagName("head")[0];

以上的代碼在所有主流的瀏覽器中都可以正常運行。需要注意的是<link>元素要添加到<head>元素中，而不是<body>元素中，才能保證在所有瀏覽器中的行為一致。

另外要注意的是，加載外部樣式文件的過程是異步的，也就是說加載樣式和執(zhí)行JavaScript代碼的過程沒有固定的次序。

另外一種定義樣式的方式是使用<style>元素來包含嵌入式的CSS樣式。例如下面的代碼：

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background:#f00;}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

上面的代碼執(zhí)行后可以在<head>元素中動態(tài)添加下面的節(jié)點：

<style type="text/css">
background:#f00;
</style>

以上的代碼可以在Firefox、Safari、Chrome和Opera瀏覽器中正常運行，在舊版本的IE瀏覽器中會報錯。舊版本的IE瀏覽器會將<style>元素看做一個特殊的節(jié)點，不允許訪問它的子節(jié)點。要解決舊版本IE的問題，就是訪問元素的styleSheet屬性，該屬性又有一個cssText屬性，可以接受CSS代碼。例如下面的代碼：

var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode("body{background:#f00;}"));
}catch(e){
style.styleSheet.cssText = "body{background:#f00;}";
}

同樣，我們也可以將動態(tài)添加樣式的代碼封裝到一個函數(shù)中，通過不同的參數(shù)來動態(tài)加載不同的樣式。

function loadStyle(code){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(code));
}catch(e){
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style); 
}

JavaScript對表格的操作

在JavaScript中，為了使我們能夠方便的構(gòu)建表格，HTML DOM為表格的<table>、<tbody>和<tr>提供了一些屬性和方法。

表格的<table>元素的屬性和方法有：

caption：保存<caption>元素的引用的指針。
tBodies：是一個<tbody>元素的HTMLCollection。
tFoot：保存<tfoot>元素的引用的指針。
tHead：保存<thead>元素的引用的指針。
rows：是表格中所有行的HTMLCollection。
createTHead()：創(chuàng)建<thead>元素，將它放入表格中，并返回其引用。
createTFoot()：創(chuàng)建<tfoot>元素，將它放入表格中，并返回其引用。
createCaption()：創(chuàng)建<caption>元素，將它放入表格中，并返回其引用。
deleteTHead()：刪除<thead>元素。
deleteTFoot()：刪除<tfoot>元素
deleteCaption()：刪除<caption>元素
deleteRow(pos)：刪除指定位置的表格行。
insertRow(pos)：向rows集合中指定位置插入一行。

表格的<tbody>元素的屬性和方法有：

rows：保存著<tbody>元素中行的HTMLCollection。
deleteRow(pos)：刪除指定位置的表格行。
insertRow(pos)：向rows集合中指定位置插入一行。

表格的<tr>元素的屬性和方法有：

cells：保存著<tr>元素中單元格的HTMLCollection。
deleteCell(pos)：刪除指定位置的單元格。
insertCell(pos)：向cells集合中指定位置插入一個單元格，并返回新插入單元格的引用。

使用上面的這些屬性和方法，可以使我們輕松的使用JavaScript來創(chuàng)建表格，例如下面的代碼：

//創(chuàng)建表格
vatabldocument.createElement("table");
table.borde1;
table.widt"100%";
//創(chuàng)建tbody
vatboddocument.createElement("tbody");
table.appendChild(tbody);
//創(chuàng)建第一個表格行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("單元1-1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("單元2-1"));
//創(chuàng)建第二個表格行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("單元1-2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("單元2-2"));
//將表格添加到文檔中
document.body.appendChild(table)

使用上面的代碼可以動態(tài)的在頁面中創(chuàng)建一個表格。其中在創(chuàng)建表格行的時候，通過<tbody>元素調(diào)用了insertCell()方法，并傳入?yún)?shù)0（表示將插入的行放在什么位置上）。執(zhí)行了這一行代碼后，會自動創(chuàng)建一個表格行，并將它插入到<tbody>元素的0位置上，此時就可以通過tbody.rows[0]來引用新插入的行。

創(chuàng)建單元格的方式也與創(chuàng)建表格行的方式相同。通過<tr>元素來調(diào)用insertCell()方法，并傳入要放置單元格的位置。然后就可以通過tbody.rows[0].cells[0]來引用新插入的單元格。

關(guān)于NodeList

理解NodeList和NamedNodeMap、HTMLCollection是從整體上理解DOM的關(guān)鍵所在。這3個集合都是動態(tài)的，也就是說，每當(dāng)文檔結(jié)構(gòu)發(fā)生了變化，它們始終都會保存最新的信息。從本質(zhì)上來說，所有的NodeList對象都是在訪問DOM文檔時實時運行的查詢。例如下面的代碼會導(dǎo)致死循環(huán)的出現(xiàn)：

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
var div = document.createElement("div");
document.body.appendChild(div);
}

上面的代碼首先獲取了所有<div>元素的HTMLCollection，保存在一個變量中。由于這個集合是動態(tài)的，所以只要有新的<div>被添加到頁面中，新的<div>元素就會被添加到這個集合中。這樣導(dǎo)致的后果是div.length值是不斷變化的，每次循環(huán)會在頁面中添加一個<div>元素，length的值也會遞增。這樣i < divs.length條件就永遠(yuǎn)不會成立，導(dǎo)致死循環(huán)的發(fā)生。

如果我們要迭代一個NodeList，最好將length屬性初始化為第二個變量，然后將迭代器和這個變量做比較，例如：

var divs = document.getElementsByTagName("div");
for(var i = 0,len = divs.length; i < len; i++){
var div = document.createElement("div");
document.body.appendChild(div);
}

由于len中保存了divs.length在循環(huán)開始時的一個快照，因此會避免死循環(huán)情況的發(fā)生。

更多示例：

function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的寬度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口標(biāo)題高度
bordercolor="#c51100";//提示窗口的邊框顏色
titlecolor="#c51100";//提示窗口的標(biāo)題顏色
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
msgObj.style.position = "absolute";
var box=document.getElementById(str);
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.onmousedown=function(){startDrag(this,'msgDiv')};
title.onmouseup=function(){stopDrag(this,'msgDiv')};
title.onmousemove=function(){drag('msgDiv')};
var closer=document.createElement("div");
closer.onclick=function(){
CloseReturn();
document.body.appendChild(box);
box.style.display = "none";
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
};
closer.innerHTML="確定";
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
document.getElementById("msgTitle").appendChild(closer);
box.style.display="inline";
document.getElementById("msgDiv").appendChild(box);
ShowReturn();
}

html dom樹：