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

2019-11-20 11:03:40

字體：大中小

供稿：網(wǎng)友

動(dòng)態(tài)腳本

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

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

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

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

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

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

另一種指定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);

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

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

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

在Firefox、Safari、Chrome和Opera瀏覽器中，上面操作的DOM代碼是可以正常執(zhí)行的。但是在舊版本的IE瀏覽器中，這些代碼會(huì)發(fā)生錯(cuò)誤。舊版本的IE瀏覽器將<script>元素看做特殊元素，不允許DOM訪問(wèn)它的子節(jié)點(diǎn)。不過(guò)，可以使用<script>元素的text屬性來(lái)指定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瀏覽器中都可以運(yùn)行。Safari3.0之前的瀏覽器雖然不能正確的執(zhí)行text屬性，但是可以使用文本節(jié)點(diǎn)來(lái)指定代碼。所以如果需要支持舊版本的瀏覽器，可以像下面這樣書寫代碼：

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é)點(diǎn)方法，因?yàn)槌伺f版本的IE瀏覽器之外，其它瀏覽器都支持這種方式。如果這行代碼拋出異常，那么說(shuō)明是舊版本的IE瀏覽器，那就必須使用text屬性。

我們可以將動(dòng)態(tài)添加腳本的代碼封裝到一個(gè)函數(shù)中，通過(guò)不同的參數(shù)來(lái)動(dòng)態(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)用這個(gè)函數(shù)，可以像下面的樣子：

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

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

動(dòng)態(tài)樣式

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

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

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

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

另外一種定義樣式的方式是使用<style>元素來(lái)包含嵌入式的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>元素中動(dòng)態(tài)添加下面的節(jié)點(diǎn)：

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

以上的代碼可以在Firefox、Safari、Chrome和Opera瀏覽器中正常運(yùn)行，在舊版本的IE瀏覽器中會(huì)報(bào)錯(cuò)。舊版本的IE瀏覽器會(huì)將<style>元素看做一個(gè)特殊的節(jié)點(diǎn)，不允許訪問(wèn)它的子節(jié)點(diǎn)。要解決舊版本IE的問(wèn)題，就是訪問(wèn)元素的styleSheet屬性，該屬性又有一個(gè)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;}";}

同樣，我們也可以將動(dòng)態(tài)添加樣式的代碼封裝到一個(gè)函數(shù)中，通過(guò)不同的參數(shù)來(lái)動(dòng)態(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對(duì)表格的操作

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

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

caption：保存<caption>元素的引用的指針。
tBodies：是一個(gè)<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集合中指定位置插入一個(gè)單元格，并返回新插入單元格的引用。

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

//創(chuàng)建表格vatabldocument.createElement("table");table.borde1;table.widt"100%";//創(chuàng)建tbodyvatboddocument.createElement("tbody");table.appendChild(tbody);//創(chuàng)建第一個(gè)表格行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)建第二個(gè)表格行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)

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

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

關(guān)于NodeList

理解NodeList和NamedNodeMap、HTMLCollection是從整體上理解DOM的關(guān)鍵所在。這3個(gè)集合都是動(dòng)態(tài)的，也就是說(shuō)，每當(dāng)文檔結(jié)構(gòu)發(fā)生了變化，它們始終都會(huì)保存最新的信息。從本質(zhì)上來(lái)說(shuō)，所有的NodeList對(duì)象都是在訪問(wèn)DOM文檔時(shí)實(shí)時(shí)運(yùn)行的查詢。例如下面的代碼會(huì)導(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，保存在一個(gè)變量中。由于這個(gè)集合是動(dòng)態(tài)的，所以只要有新的<div>被添加到頁(yè)面中，新的<div>元素就會(huì)被添加到這個(gè)集合中。這樣導(dǎo)致的后果是div.length值是不斷變化的，每次循環(huán)會(huì)在頁(yè)面中添加一個(gè)<div>元素，length的值也會(huì)遞增。這樣i < divs.length條件就永遠(yuǎn)不會(huì)成立，導(dǎo)致死循環(huán)的發(fā)生。

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

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)開始時(shí)的一個(gè)快照，因此會(huì)避免死循環(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樹：