基于JavaScript創(chuàng)建動態(tài)Dom
動態(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);
從上圖的結果中可以看到，上面代碼在<body>元素中生成了一個<script>節(jié)點：
<script type="text/javascript" src="demo.js"></script>
需要注意的是，在執(zhí)行最后一行代碼把<script>添加到頁面之前，是不會下載外部腳本文件的。
另一種指定JavaScript代碼的方式是行內方式，例如：
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;
}
上面的代碼首先嘗試標準的DOM文本節(jié)點方法，因為除了舊版本的IE瀏覽器之外，其它瀏覽器都支持這種方式。如果這行代碼拋出異常，那么說明是舊版本的IE瀏覽器，那就必須使用text屬性。
我們可以將動態(tài)添加腳本的代碼封裝到一個函數中，通過不同的參數來動態(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);
}
要調用這個函數，可以像下面的樣子：
loadScript("function fn1(){alert('hello wolrd!')}");
這種方式加載的代碼會在全局作用域中執(zhí)行，而且當腳本執(zhí)行后立刻可用。實際上，這樣執(zhí)行代碼與在全局作用域中把相同的字符串傳遞給eval()函數是一樣的。
動態(tài)樣式
通?？梢詫SS樣式包含到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)添加樣式的代碼封裝到一個函數中，通過不同的參數來動態(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中，為了使我們能夠方便的構建表格，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>元素調用了insertCell()方法，并傳入參數0（表示將插入的行放在什么位置上）。執(zhí)行了這一行代碼后，會自動創(chuàng)建一個表格行，并將它插入到<tbody>元素的0位置上，此時就可以通過tbody.rows[0]來引用新插入的行。
創(chuàng)建單元格的方式也與創(chuàng)建表格行的方式相同。通過<tr>元素來調用insertCell()方法，并傳入要放置單元格的位置。然后就可以通過tbody.rows[0].cells[0]來引用新插入的單元格。
關于NodeList
理解NodeList和NamedNodeMap、HTMLCollection是從整體上理解DOM的關鍵所在。這3個集合都是動態(tài)的，也就是說，每當文檔結構發(fā)生了變化，它們始終都會保存最新的信息。從本質上來說，所有的NodeList對象都是在訪問DOM文檔時實時運行的查詢。例如下面的代碼會導致死循環(huá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>元素就會被添加到這個集合中。這樣導致的后果是div.length值是不斷變化的，每次循環(huán)會在頁面中添加一個<div>元素，length的值也會遞增。這樣i < divs.length條件就永遠不會成立，導致死循環(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 //提示窗口標題高度
bordercolor="#c51100";//提示窗口的邊框顏色
titlecolor="#c51100";//提示窗口的標題顏色
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樹：
- JS動態(tài)創(chuàng)建DOM元素的方法
- javascript實現dom動態(tài)創(chuàng)建省市縱向列表菜單的方法
- 通過JS動態(tài)創(chuàng)建一個html DOM元素并顯示
- JavaScript與DOM組合動態(tài)創(chuàng)建表格實例
- JavaScript 高級篇之DOM文檔,簡單封裝及調用、動態(tài)添加、刪除樣式（六）
- javascript轉換字符串為dom對象（字符串動態(tài)創(chuàng)建dom）
- javascript DOM操作之動態(tài)刪除TABLE多行
- js操作DOM--添加、刪除節(jié)點的簡單實例
- javascript將DOM節(jié)點添加到文檔的方法實例分析
- JavaScript DOM節(jié)點添加示例
- JS實現動態(tài)添加DOM節(jié)點和事件的方法示例
相關文章
javascript讀取xml...2006-11-11
uni-app應用配置manifest.json最全最詳細配置
這篇文章主要給大家介紹了關于uni-app應用配置manifest.json最全最詳細配置,manifest.json文件是UniApp開發(fā)中用來配置應用信息的重要文件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要和大家分享一個炫酷的碎片式切圖效果，本文主要利用canvas來實現，代碼量不多，但有些地方還是需要花點時間去理解的，感興趣的可以學習一下2022-10-10
window.addEventListener來解決讓一個js事件執(zhí)行多個函數
可能你也碰到過這種情況,就是在js的代碼中用了window.onload后,可能會影響到body中的onload事件。這時就要用window.attachEvent和window.addEventListener來解決一下,需要的朋友可以參考下2012-12-12
這篇文章主要給大家介紹了關于JS重學系列之new操作符的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要為大家詳細介紹了JS或jquery實現全屏的四種寫法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章介紹了javascript 實現鍵盤上下左右功能的小例子，有需要的朋友可以參考一下2013-09-09
這篇文章主要介紹了js實現簡單折疊、展開菜單的方法,涉及javascript動態(tài)操作頁面元素變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JavaScript+CSS實現仿Mootools豎排彈性動畫菜單效果
這篇文章主要介紹了JavaScript+CSS實現仿Mootools豎排彈性動畫菜單效果,可實現鼠標滑過菜單項呈現彈性移動顯示的效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了jsonp跨域請求的相關資料，激活了所有接口支持瀏覽器跨域請求的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07